﻿
var arrOptions = new Array();
	var theTextBox;
	var currentValueSelected = -1;//表当前选中的某项
	//以上设置一些全局变量
	window.onload = function()
	{
	var elemSpan = document.createElement("div");//在页面创建span标签
	elemSpan.id = "spanOutput";
	elemSpan.className = "spanTextDropdown";	
	document.body.appendChild(elemSpan);
	document.searchForm.txtUserInput.onkeyup = test1;//当按键抬起调用此函数
	};
  
  
  function   getEvent()
{
    var   i   =   0;
    if(document.all) 
    {
    	return   window.event;
    }
    func = getEvent.caller;
    while(func != null)
    {
        var   arg0 = func.arguments[0];
        if(arg0)
       {
            if(arg0.constructor == MouseEvent)
          {
                return   arg0;
            }
        }
        func = func.caller;
    }
    return   null;
}
  
  
function test1(e){
   var intKey = -1;
        var temp="";
         if (window.ActiveXObject)
	      {
			if(window.event)
				{
					intKey = event.keyCode;		
			        theTextBox = event.srcElement;//获得事件源
			    }
	       }
        else //if (document.getBoxObjectFor)
           {
           intKey = e.keyCode;	
	  //     e = getEvent();
	       theTextBox = e.target ;//获得事件源
           }
       	
	if(theTextBox.value.length == 0){
			HideTheBox();
			return false;
		}
		if(intKey == 13){//按回车键			
			SetText();
			theTextBox.focus();
			return false;
		}else if(intKey == 38){//按向上键	
			MoveHighlight(-1);
			return false;
		}else if(intKey == 40){	//按向下键	
			MoveHighlight(1);
			return false;
		}
	if($("txtUserInput").value==""||$("txtUserInput").value==temp)return;
	SearchWork.findByInput(//dwr技术，后台连接数据库
	    $("txtUserInput").value,
		function(datas){
		    arrOptions=datas;
			Bulid(arrOptions);//建立下拉框
			temp = $("txtUserInput").value;
		}
	);
}
function Bulid(arrOptions){
        var inner="";
         SetElementPosition();//设置下拉框出现的位置
    	for(var i=0; i < arrOptions.length; i++){
    	   inner+="<ul  id=arr_"+i+" class='spanNormalElement' onmouseover='SetHighColor(this)' onclick='SetText()'><li style='float :left;'>"+arrOptions[i].searchWordName+"</li><li style='float :right;color:#008000; '> "+arrOptions[i].searchWordResult+"</li></ul>";
			}
		    document.getElementById("spanOutput").innerHTML = inner;
		 if(inner!=""){
			document.getElementById("arr_0").className ="spanHighElement";//设置第一个顶为默认选中
			currentValueSelected=0;
			}else {HideTheBox();currentValueSelected=-1;}
}

function SetElementPosition(){//设置下拉框出现的位置
	var selectedPosX = 0;
	var selectedPosY = 0;
	var theElement = document.searchForm.txtUserInput;
	var theTextBoxInt = document.searchForm.txtUserInput;

	if (!theElement) return;
	var theElemHeight = 0 ;
	theElemHeight = theElement.offsetHeight;	
	var theElemWidth = 0 ;
	theElemWidth = theElement.offsetWidth;
	theElemWidth = theElemWidth -2 ;

	while(theElement != null){
	selectedPosX += theElement.offsetLeft;
	selectedPosY += theElement.offsetTop;
	theElement = theElement.offsetParent;
	}
	xPosElement = document.getElementById("spanOutput");
	xPosElement.style.left = selectedPosX+"px";
	xPosElement.style.width = theElemWidth+"px";
	xPosElement.style.top = selectedPosY + theElemHeight + "px";
	xPosElement.style.display = "block";
}

 function MoveHighlight(xDir){//设置上下移动键
		 var currnum=currentValueSelected+xDir;
		if(currnum >= 0 && currnum<arrOptions.length ){
	     document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";
         document.getElementById("arr_"+currnum+"").className ="spanHighElement";
         currentValueSelected=currnum;
		  }else if(currnum==arrOptions.length){
		   document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";
           currentValueSelected=0;
           document.getElementById("arr_"+currentValueSelected+"").className ="spanHighElement";
          }else if(currnum==-1){
		   document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";
           currentValueSelected=arrOptions.length-1;
           document.getElementById("arr_"+currentValueSelected+"").className ="spanHighElement";
          }
 }
function HideTheBox(){//隐藏下拉框
	document.getElementById("spanOutput").style.display = "none";
	currentValueSelected = -1;
}
function SetText(){//选中下拉框中的某个值
	theTextBox = document.searchForm.txtUserInput;
	theTextBox.value = arrOptions[currentValueSelected].searchWordName;
	document.getElementById("spanOutput").style.display = "none";
	$("txtUserInput").setValue=theTextBox.value;
	currentValueSelected = -1; 
}
	
function SetHighColor(theTextBox){//当鼠标划过变为选中状态
	if(theTextBox){
		currentValueSelected =
		theTextBox.id.slice(theTextBox.id.indexOf("_")+1,
		theTextBox.id.length);
	}
	for(var i = 0; i < arrOptions.length; i++){
		document.getElementById('arr_' + i).className ='spanNormalElement';
	}
	document.getElementById('arr_'+currentValueSelected).className = 'spanHighElement';
}