www.pudn.com > GoogleSuggest.rar > build.js

// JavaScript Document 
// JavaScript Document 
var arrOptions = new Array();//????????????????? 
	var strLastValue = "";//?????????????????????? 
	var theTextBox;//????????? 
	var currentValueSelected = -1;//???????????????? 
	var req;//????????? 
	 
	window.onload = function(){ 
	var elemSpan = document.createElement("span");//??????? 
	elemSpan.id = "spanOutput";                   //?????id???"spanOutput" 
	//?????style???"spandextDropdown"?????style.css??????? 
	elemSpan.className = "spanTextDropdown"; 
	 
	document.body.appendChild(elemSpan);//?????????Html??? 
	//????????onkeyup???????GiveOptions?? 
	document.Form1.txtUserInput.onkeyup = GiveOptions; 
		 
	}; 
/* 
   GiveOptions()???????????????????,?????????intKey,????intKey??? 
   ?????Unicode?,????theTextBox??????????,???????????.???? 
   intKey?????????,??????????????? 
*/ 
	function GiveOptions() 
	{ 
		var intKey = -1; 
		if(window.event){ 
		intKey = event.keyCode;//?????Unicdoe?? 
		theTextBox = event.srcElement;//??theTextBox????????,???????? 
	//	TypeAhead(theTextBox.value); 
		} 
				 
		 
		if(theTextBox.value.length == 0){//????????????? 
			HideTheBox();//??????? 
			strLastValue = ""; 
			return false; 
		} 
		if(intKey == 13){			  //???????"Enter"? 
			GrabHighlighted();        //?????????????????? 
			theTextBox.blur();        //????????? 
			return false; 
		}else if(intKey == 38){		  //???????"??"?? 
			MoveHighlight(-1);        //?????????????? 
			return false; 
		}else if(intKey == 40){		 //????????"??"?? 
			MoveHighlight(1);        //?????????????? 
			return false; 
		} 
		//??strLastValue????????????? 
		if(theTextBox.value.indexOf(strLastValue)!=0|| 
			arrOptions.length==0||(strLastValue.length==0&&theTextBox.value.length>0)|| 
			(theTextBox.value.length<= strLastValue.length)) 
		{ 
			strLastValue = theTextBox.value;//????strLastValue?? 
			TypeAhead(theTextBox.value);//??TypeAhead()?????????? 
		}else 
		{		 
			BuildList(theTextBox.value);//??BuildList()????????? 
		//	strLastValue = theTextBox.value; 
		} 
	} 
  /* 
    TypeAhead()??????XMLHTTPRequest??req,??????????. 
    ???????????????. 
  */ 
function TypeAhead(xStrText) 
	{ 
         var url = "make?param=" + xStrText;//???????????? 
 
         if (window.XMLHttpRequest) { 
 
             req = new XMLHttpRequest();//??XMLHTTPRequest?? 
 
         }else if (window.ActiveXObject) {//??????????? 
 
             req = new ActiveXObject("Microsoft.XMLHTTP"); 
 
         } 
 
        if(req){ 
 
            req.open("GET", url, true);//???? 
 
             req.onreadystatechange = callback;//?????? 
 
            req.send(null);        //???? 
 
         }	 
	} 
	 
	/* 
	 callback()???????????????,?????4?,??????????,?????parseMessage 
	 ??. 
	*/ 
	function callback() { 
	 
    if (req.readyState == 4) {//?????? 
 
        if (req.status == 200) {//??HTTP??? 
 
                 parseMessage();//??parseMessage()???????? 
 
                 // update the HTML DOM based on whether or not message is valid 
 
        }else{ 
 
            alert ("Not able to retrieve description" + req.statusText); 
 
        }        
 
    } 
    else 
    { 
    	 
    } 
   } 
    
    
   /* 
    parseMessage()???????????????,????????????arrOptions???. 
   */ 
   function parseMessage() { 
    
    var xmlDoc = req.responseXML.documentElement;//?????xml?? 
     
    var node = xmlDoc.getElementsByTagName('info');//??????? 
     
    arrOptions = new Array();//????arrOption?? 
     
 
     
    for(var i=0;i0)//???????????0 
		{	document.getElementById("spanOutput").innerHTML = inner; 
		 
			document.getElementById("OptionsList_0").className ="spanHighElement"; 
			//????????????????? 
			currentValueSelected = 0;//??currentValueSelected?? 
		} 
		else 
		{ 
			HideTheBox();//????????0,????????? 
		} 
		 
	} 
		 
	/* 
	  SetElementPosition()??????????????????. 
	*/ 
	function SetElementPosition(){ 
	var selectedPosX = 0;//????????? 
	var selectedPosY = 0;//????????? 
	var theElement = document.Form1.txtUserInput;//????????? 
	var theTextBoxInt = document.Form1.txtUserInput; 
	if (!theElement) return; 
	var theElemHeight = theElement.offsetHeight;//??????????? 
	var theElemWidth = theElement.offsetWidth;//??????????? 
	while(theElement != null){//????selectedPosx?selectedPoxy?? 
	selectedPosX += theElement.offsetLeft; 
	selectedPosY += theElement.offsetTop; 
	theElement = theElement.offsetParent; 
	} 
	xPosElement = document.getElementById("spanOutput");//???????,????????? 
	xPosElement.style.left = selectedPosX;//????????? 
 
	 
	xPosElement.style.width = theElemWidth;//??????? 
	xPosElement.style.top = selectedPosY + theElemHeight//????????? 
	xPosElement.style.display = "block";//????????? 
} 
	 
		 
	var countForId = 0;//??????countForId 
	 
	/* 
	  MakeMatches()?????????????arrOptions????????????, 
	  ????????????????????,???????. 
	*/ 
function MakeMatches(xCompareStr) 
{ 
	countForId = 0; 
	var matchArray = new Array();//??matchArray?? 
	 
	for(var i=0;i=0) 
		{   //??????arrOptions?????????,????matchArray???			 
			matchArray[matchArray.length]=CreateUnderline(arrOptions[i],xCompareStr,i); 
		} 
		else 
		{ 
			continue; 
		} 
	} 
 
		return matchArray; 
} 
		 
		 
	//??????????? 
	var undeStart = ""; 
	//?????????????????? 
	var undeEnd = ""; 
	var selectSpanStart = ""; 
	countForId++; 
	 
	var regExp = new RegExp(xTextMatch,"ig");//??????? 
	 
	var start = xStr.search(regExp);//??????????????? 
	 
	var matchedText = xStr.substring(start,start + xTextMatch.length); 
	 
	//???????????? 
	var Replacestr = xStr.replace(regExp,undeStart+matchedText+undeEnd); 
	 
	return selectSpanStart + selectSpanMid +Replacestr+ selectSpanEnd; 
	//?????,????? 
	} 
	 
	/* 
	  setHightColor()??????????????????,?????????????? 
	  ??????????. 
	*/ 
	function SetHighColor(theTextBox){ 
		if(theTextBox){ 
			currentValueSelected = 
			theTextBox.id.slice(theTextBox.id.indexOf("_")+1, 
			theTextBox.id.length); 
		} 
		for(var i = 0; i < countForId; i++){ 
			document.getElementById('OptionsList_' + i).className = 
		'spanNormalElement'; 
		} 
		document.getElementById('OptionsList_' + 
		currentValueSelected).className = 'spanHighElement'; 
	} 
	 
	/* 
	  SEtText()???arrOptions??????????,????????????? 
	  ???? 
	*/ 
	function SetText(xVal){ 
		theTextBox = document.Form1.txtUserInput;//??????????? 
		theTextBox.value = arrOptions[xVal]; //set text value//????????? 
		//??????? 
		document.getElementById("spanOutput").style.display = "none"; 
		currentValueSelected = -1; //remove the selected index 
	} 
	 
	/* 
	 GrabHighlighted()?????????"Enter"??,??SetText()??????????, 
	 ????????? 
	*/ 
	function GrabHighlighted(){ 
		if(currentValueSelected >= 0){ 
		xVal = document.getElementById("OptionsList_" + 
		currentValueSelected).getAttribute("theArrayNumber"); 
		SetText(xVal); 
		HideTheBox(); 
		} 
	} 
	 
	/* 
	 ??HideTheBox()?????????display?????"none",??????? 
	*/ 
	function HideTheBox(){ 
		document.getElementById("spanOutput").style.display = "none";//??display?? 
		currentValueSelected = -1; 
	} 
	 
	 
	function MoveHighlight(xDir){ 
		if(currentValueSelected >= 0){ 
			newValue = parseInt(currentValueSelected) + parseInt(xDir); 
			if(newValue > -1 && newValue < countForId){ 
				currentValueSelected = newValue; 
				SetHighColor (null); 
			} 
		} 
	} 
	  
	function ReDraw() 
	{ 
		BuildList(document.Form1.txtUserInput.value); 
	}