//Listing 10.6 
      function SetProperties(xElem,xHidden,xserverCode,
        xignoreCase,xmatchAnywhere,xmatchTextBoxWidth,
        xshowNoMatchMessage,xnoMatchingDataMessage,xuseTimeout,
        xtheVisibleTime,hiddenCtrls,alwaysHidden,maxItem){
          var props={
            elem: xElem,
            hidden: xHidden,
            serverCode: xserverCode,
            regExFlags: ( (xignoreCase) ? "i" : "" ),
            regExAny: ( (xmatchAnywhere) ? "" : "^" ),
            matchAnywhere: xmatchAnywhere,
            matchTextBoxWidth: xmatchTextBoxWidth,
            theVisibleTime: xtheVisibleTime,
            showNoMatchMessage: xshowNoMatchMessage,
            noMatchingDataMessage: xnoMatchingDataMessage,
            useTimeout: xuseTimeout,
            ctrls : hiddenCtrls,
            alwaysHid : alwaysHidden,
            maxItem : maxItem
          };
          AddHandler(xElem);
          return props;
      }

      //Listing  10.8
      var isOpera=(navigator.userAgent.toLowerCase().indexOf("opera")!= -1);
      function AddHandler(objText){
        objText.onkeyup = GiveOptions;
        objText.onblur = function(){
          if(this.obj.useTimeout)StartTimeout();
        }
        objText.onblur = onBlur;//GiveOptions;
        if(isOpera)objText.onkeypress = GiveOptions;
        //document.captureEvents(Event.KEYDOWN);
      }

      //Listing 10.9
      var arrOptions = new Array();
      var strLastValue = "";
      var bMadeRequest;
      var theTextBox;
      var objLastActive;
      var currentValueSelected = -1;
      var bNoResults = false;
      var isTiming = false;
      //var oldOnKeyDown;
      
      function onBlur()
      {  
      	GrabHighlighted();
        //arrOptions = new Array();
        HideTheBox();
        //strLastValue = "";
        return false;        
      }
      
      //Listing 10.10
      function GiveOptions(e){
        var intKey = -1;
        if(window.event){
          intKey = event.keyCode;          
          theTextBox = event.srcElement;
        }
        else{
          intKey = e.which;
          theTextBox = e.target;
        }
        
        if ( document.getElementById("spanOutput").style.display == "none" && intKey == 13 )
		{
			//theTextBox.obj.elem.focus();
			return false;
		}
        
        if(theTextBox.obj.useTimeout){
          if(isTiming)EraseTimeout();
          StartTimeout();
        }
//        if(theTextBox.value.length == 0 && !isOpera){
//          arrOptions = new Array();
//          HideTheBox();
//          strLastValue = "";
//          return false;
//        }
		
		//alert(intKey);
		if ( intKey == 27 ) //esc
		{
			arrOptions = new Array();
            HideTheBox();
            //strLastValue = "";
            return false;
		}
		else if ( intKey == 9 ) //tab
		{
			arrOptions = new Array();
            HideTheBox();
            //strLastValue = "";
            return true;
		}
				
        if(objLastActive == theTextBox){
          if(intKey == 13){
            GrabHighlighted();
            //theTextBox.blur();            
            theTextBox.focus();
            return false;
          }
          else if(intKey == 38){
            currentValueSelected = currentValueSelected ==-1 ? 0 : currentValueSelected ;
            MoveHighlight(-1);
            return false;
          }
          else if(intKey == 40){
            currentValueSelected = currentValueSelected ==-1 ? 0 : currentValueSelected ;
            MoveHighlight(1);
            return false;
          }
          else{}
        }
        
        /*
        if(objLastActive != theTextBox ||
           theTextBox.value.indexOf(strLastValue) != 0 ||
           ((arrOptions.length==0 || arrOptions.length==15 ) && !bNoResults) ||           
           (theTextBox.value.length <= strLastValue.length)){
             objLastActive = theTextBox;
             bMadeRequest = true
             TypeAhead(theTextBox.value)
        }
        else if(!bMadeRequest){
          BuildList(theTextBox.value);
        }*/
        if (bNoResults && theTextBox.value.length < strLastValue.length)
        {
        	bNoResults = false;  
        }
		if( theTextBox.value != strLastValue && !bNoResults)
		{
        objLastActive = theTextBox;
        bMadeRequest = true;
        TypeAhead(theTextBox.value);
        }
        
        
        
        strLastValue = theTextBox.value;
      }

      //Listing 10.11
      function TypeAhead(xStrText){
        var strParams = "q=" + xStrText +
                        "&where=" + theTextBox.obj.matchAnywhere;
        var loader1 = new net.ContentLoader(theTextBox.obj.serverCode,
                                            BuildChoices,null,"POST",strParams);
      }

      //Listing 10.12
      function onKeyDown(e)
      { 
      	var intKey = -1;
        if(window.event){
          intKey = event.keyCode;          
          theTextBox = event.srcElement;
        }
        else{
          intKey = e.which;
          theTextBox = e.target;
        }
        if(intKey == 13)
        {
        	GrabHighlighted();
        	HideTheBox();
            theTextBox.focus();
      		return false; 
      	}
      	else if ( intKey == 27 ) //esc
		{
			return false;
		}
		else 
		{
      		return true;
      	}
      }
      function BuildChoices(){
        var strText = this.req.responseText;
        eval(strText);
        BuildList(strLastValue);
        bMadeRequest = false;
        document.onkeydown = onKeyDown;//GiveOptions;
      }

      //Listing 10.13
      function BuildList(theText){
        SetElementPosition(theTextBox);
        var theMatches = MakeMatches(theText);
        var nLen = theMatches.length;
        var targerEle = document.getElementById("spanOutput");
        theMatches = theMatches.join().replace(/\,/gi,"");
        if(theMatches.length > 0){
          
          targerEle.innerHTML = theMatches;
          document.getElementById(
            "OptionsList_0").className=
            "spanHighElement";
          currentValueSelected = -1;//currentValueSelected = 0;
          bNoResults = false;
                  
          if ((theTextBox.obj.alwaysHid || nLen >= 3) && theTextBox.obj.ctrls)
          //if (theTextBox.obj.ctrls)
	      {	     
	      		//int nHeight = 0;//targerEle.offsetTop+targerEle.offsetHeight;
	        	for(var i = 0; i < theTextBox.obj.ctrls.length; i++)
	        	{
					if(theTextBox.obj.ctrls[i] )//&& theTextBox.obj.ctrls[i].offsetTop < nHeight )
					{
						theTextBox.obj.ctrls[i].style.display='none';
					}
				}
	        	
	      }
        }
        else{
          currentValueSelected = -1;
          bNoResults = true;
          if(theTextBox.obj.showNoMatchMessage)
          {
            document.getElementById(
              "spanOutput").innerHTML =
              "<span class='noMatchData'>" +
              theTextBox.obj
              .noMatchingDataMessage +
              "</span>";
			if ((theTextBox.obj.alwaysHid || nLen >= 3) && theTextBox.obj.ctrls)
		    {	     
		        for(var i = 0; i < theTextBox.obj.ctrls.length; i++)
		        {
					if(theTextBox.obj.ctrls[i])
					{
						theTextBox.obj.ctrls[i].style.display='none';
					}
				}
		        	
		    }
          }
          else HideTheBox();
        }
      }

      //Listing 10.14
      function SetElementPosition(theTextBoxInt){
        var selectedPosX = 0;
        var selectedPosY = 0;
        var theElement = theTextBoxInt;
        if (!theElement) return;
        var theElemHeight = theElement.offsetHeight;
        var theElemWidth = theElement.offsetWidth;
        while(theElement != null){
          selectedPosX += theElement.offsetLeft;
          selectedPosY += theElement.offsetTop;
          theElement = theElement.offsetParent;
        }
        xPosElement = document.getElementById("spanOutput");
        xPosElement.style.left = selectedPosX;
        if(theTextBoxInt.obj.matchTextBoxWidth)
          xPosElement.style.width = theElemWidth;
        xPosElement.style.top = selectedPosY + theElemHeight
        xPosElement.style.display = "block";
        if(theTextBoxInt.obj.useTimeout){
          xPosElement.onmouseout = StartTimeout;
          xPosElement.onmouseover = EraseTimeout;
        }
        else{
          xPosElement.onmouseout = null;
          xPosElement.onmouseover = null;
        }
      }
      
      function ESCCharacter( textValue )
      {
      	var result = textValue;
      	var text = "$()*+.[?\\^|";//"$()*+.[?\\^{|";
    	textLength = textValue.length;
    	if (textValue == null || textValue == "")
    	{
        	return result;
    	}
    	result = "";
    	for (var i = 0; i < textLength; i ++)
    	{
        	aChar = textValue.substring(i, i+1);
        	isFound = text.indexOf(aChar);
        	if (isFound != -1)
        	{
            	result = result + "\\";
        	}
        	result = result + aChar;
    	}
    	return result;
      }

      //Listing 10.15
      var countForId = 0;
      function MakeMatches(xCompareStr){
        countForId = 0;
        //alert(xCompareStr)
        xCompareStr = ESCCharacter(xCompareStr);
        var matchArray = new Array();
        var regExp = new RegExp(theTextBox.obj.regExAny +
          xCompareStr,theTextBox.obj.regExFlags);
        var nCount = 1;  
        for(i=0;i<arrOptions.length;i++)
        {
          if (theTextBox.obj.maxItem && nCount > theTextBox.obj.maxItem )
          {
          	break;
          }	
          var theMatch = arrOptions[i][0].match(regExp);
          if(theMatch)
          {
            matchArray[matchArray.length]=
              CreateUnderline(arrOptions[i][0],
              xCompareStr,i);
            nCount++;  
          }
        }
        return matchArray;
      }


      //Listing 10.16
      var undeStart = "<span class='spanMatchText'>";
      var undeEnd = "</span>";
      //var selectSpanStart = "<span style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
      var selectSpanStart = "<span style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
      
      var selectSpanEnd ="</span>";
      function CreateUnderline(xStr,xTextMatch,xVal){
        selectSpanMid = "onclick='SetText(" + xVal + ")'" +
          "id='OptionsList_" +
          countForId + "' theArrayNumber='"+ xVal +"'>";
        var regExp = new RegExp(theTextBox.obj.regExAny +
        xTextMatch,theTextBox.obj.regExFlags);
        var aStart = xStr.search(regExp);
        var matchedText = xStr.substring(aStart,
          aStart + xTextMatch.length);
        countForId++;
        return selectSpanStart + selectSpanMid +
          xStr.replace(regExp,undeStart +
          matchedText + undeEnd) + selectSpanEnd;
      }

      //Listing 10.17
      function MoveHighlight(xDir){
        if(currentValueSelected >= 0){
          newValue = parseInt(currentValueSelected) + parseInt(xDir);
          if(newValue > -1 && newValue < countForId){
            currentValueSelected = newValue;
            SetHighColor (null);            
          }
        }
      }
      function SetHighColor(theTextBox){
        if(theTextBox){        
          currentValueSelected =
          theTextBox.id.slice(theTextBox.id.indexOf("_")+1,
          theTextBox.id.length);
        }
        for(i = 0; i < countForId; i++){
          document.getElementById('OptionsList_' + i).className =
            'spanNormalElement';
        }
        document.getElementById('OptionsList_' +
          currentValueSelected).className = 'spanHighElement';
      }

      //Listing 10.18
      function SetText(xVal){
        theTextBox.value = arrOptions[xVal][0]; //set text value
        theTextBox.obj.hidden.value = arrOptions[xVal][1];
        document.getElementById("spanOutput").style.display = "none";
        if (theTextBox.obj.ctrls)
        {
        	for(var i = 0; i < theTextBox.obj.ctrls.length; i++)
        	{
				if(theTextBox.obj.ctrls[i])
				{
					theTextBox.obj.ctrls[i].style.display='';
				}
			}
        	
        }
        //if (theTextBox.obj.comb)
        //{
        //	theTextBox.obj.comb.style.display='';
        //	theTextBox.obj.elem.focus();
        //}
        document.onkeydown = null;
        currentValueSelected = -1; //remove the selected index
      }
      function GrabHighlighted(){
        if(currentValueSelected >= 0){
          xVal = document.getElementById("OptionsList_" +
          currentValueSelected).getAttribute("theArrayNumber");
          SetText(xVal);
          HideTheBox();
        }
      }
      function HideTheBox(){
        document.getElementById("spanOutput").style.display = "none";
        
        if (theTextBox && theTextBox.obj && theTextBox.obj.ctrls)
        {
        	for(var i = 0; i < theTextBox.obj.ctrls.length; i++)
        	{
				if(theTextBox.obj.ctrls[i])
				{
					theTextBox.obj.ctrls[i].style.display='';
				}
			}
        	
        }
        //if (theTextBox.obj.comb)
        //{
        //	theTextBox.obj.comb.style.display='';
        //	theTextBox.obj.elem.focus();
        //}
        document.onkeydown = null;
        
        currentValueSelected = -1;
        EraseTimeout();        
      }

      //Listing 10.19
      function EraseTimeout(){
        clearTimeout(isTiming);
        isTiming = false;
      }
      function StartTimeout(){
        isTiming = setTimeout("HideTheBox()",
        theTextBox.obj.theVisibleTime);
      }