Крейн Д., Паскарелло Э., Джеймс Д,. AJAX в действии / Ajax в действии / Исходники примеров / ajaxinactioncode_03nov2005 / ch10 / original / typeAhead

Type Ahead //Listing 10.4 window.onload = function(){ var elemSpan = document.createElement("span"); elemSpan.id = "spanOutput"; elemSpan.className = "spanTextDropdown"; document.body.appendChild(elemSpan); //Listing 10.7 document.Form1.txtUserInput.obj = SetProperties(document.Form1.txtUserInput, document.Form1.txtUserValue,'typeAheadXML.aspx', true,true,true,true,"No matching Data",false,null); } //Listing 10.6 function SetProperties(xElem,xHidden,xserverCode, xignoreCase,xmatchAnywhere,xmatchTextBoxWidth, xshowNoMatchMessage,xnoMatchingDataMessage,xuseTimeout, xtheVisibleTime){ 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 }; 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(); } if(isOpera)objText.onkeypress = GiveOptions; } //Listing 10.9 var arrOptions = new Array(); var strLastValue = ""; var bMadeRequest; var theTextBox; var objLastActive; var currentValueSelected = -1; var bNoResults = false; var isTiming = 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(theTextBox.obj.useTimeout){ if(isTiming)EraseTimeout(); StartTimeout(); } if(theTextBox.value.length == 0 && !isOpera){ arrOptions = new Array(); HideTheBox(); strLastValue = ""; return false; } if(objLastActive == theTextBox){ if(intKey == 13){ GrabHighlighted(); theTextBox.blur(); return false; } else if(intKey == 38){ MoveHighlight(-1); return false; } else if(intKey == 40){ MoveHighlight(1); return false; } else{} } if(objLastActive != theTextBox || theTextBox.value.indexOf(strLastValue) != 0 || ((arrOptions.length==0 || arrOptions.length==15 ) && !bNoResults) || (theTextBox.value.length 0){ document.getElementById("spanOutput") .innerHTML = theMatches; document.getElementById( "OptionsList_0").className= "spanHighElement"; currentValueSelected = 0; bNoResults = false; } else{ currentValueSelected = -1; bNoResults = true; if(theTextBox.obj.showNoMatchMessage) document.getElementById( "spanOutput").innerHTML = "" + theTextBox.obj .noMatchingDataMessage + ""; 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; } } //Listing 10.15 var countForId = 0; function MakeMatches(xCompareStr){ countForId = 0; var matchArray = new Array(); var regExp = new RegExp(theTextBox.obj.regExAny + xCompareStr,theTextBox.obj.regExFlags); for(i=0;i= 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"; 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"; currentValueSelected = -1; EraseTimeout(); } //Listing 10.19 function EraseTimeout(){ clearTimeout(isTiming); isTiming = false; } function StartTimeout(){ isTiming = setTimeout("HideTheBox()", theTextBox.obj.theVisibleTime); } /* Listing 10.5--> */ span.spanTextDropdown{ position: absolute; top: 0px; left: 0px; width: 150px; z-index: 101; background-color: #C0C0C0; border: 1px solid #000000; padding-left: 2px; overflow: visible; display: none; } span.spanMatchText{ text-decoration: underline; font-weight: bold; } span.spanNormalElement{ background: #C0C0C0; } span.spanHighElement{ background: #000040; color: white; cursor: pointer; } span.noMatchData{ font-weight: bold; color: #0000FF; } AutoComplete Text Box: