AJAX+js实现asp.net中textbox的智能提示

function createAjaxObj() { var httpRequest = false; //判断是否包含XMLHttpRequest对象 PS:将来IE高也有可能继承次对象 if (window.XMLHttpRequest) { //火狐 , Safari 等浏览器 httpRequest = new XMLHttpRequest(); if (httpRequest.overrideMimeType) httpRequest.overrideMimeType('text/xml'); }//判断是否支持Active控件对象 else if (window.ActiveXObject) { //IE浏览器 try { //IE5.0 httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { //IE5.5以上 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } //返回创建好的AJAX对象 return httpRequest; } var searchReq = createAjaxObj(); var OsTyep = ''; function getOs() { //判断浏览器类型 if (navigator.userAgent.indexOf("MSIE") > 0) { document.getElementById('txtSearch').attachEvent("onpropertychange", search); OsTyep = "MSIE"; } else if (navigator.userAgent.indexOf("Firefox") > 0) { document.getElementById('txtSearch').addEventListener("input", search, false); OsTyep = "Firefox"; } } function ClearOS() { if (navigator.userAgent.indexOf("MSIE") > 0) { document.getElementById('txtSearch').detachEvent("onpropertychange", search); OsTyep = "MSIE"; } else if (navigator.userAgent.indexOf("Firefox") > 0) { document.getElementById('txtSearch').removeEventListener("input", search, false); OsTyep = "Firefox"; } } function createAjaxObj() { var httpRequest = false; //判断是否包含XMLHttpRequest对象 PS:将来IE高也有可能继承次对象 if (window.XMLHttpRequest) { //火狐 , Safari 等浏览器 httpRequest = new XMLHttpRequest(); if (httpRequest.overrideMimeType) httpRequest.overrideMimeType('text/xml'); //ie: onpropertychange //ff: oninput } //判断是否支持Active控件对象 else if (window.ActiveXObject) { //IE浏览器 try { //IE5.0 httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { //IE5.5以上 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } //返回创建好的AJAX对象 return httpRequest; } //异步请求服务器获取搜索结果 function search() { if (searchReq.readyState == 4 || searchReq.readyState == 0) { //获得文本框中的值 var valStr = escape(document.getElementById("txtSearch").value); //建立连接 searchReq.open("GET", encodeURI('Search.ashx?search=' + valStr+'&fresh=' + Math.random()), true); //当请求状态改变时调用 handleSearch方法 searchReq.onreadystatechange = handleSearch; searchReq.send(null); } } //返回结果处理方法 function handleSearch() { if (searchReq.readyState == 4) { //获得搜索提示结果的元素DIV var searchDIV = document.getElementById("search_div"); searchDIV.innerHTML = ""; //用^将返回的文本数据分割成数组 var resultStrArr = searchReq.responseText.split("^"); //循环构建HTML代码 for (var i = 0; i < resultStrArr.length - 1; i++) { var htmlStr = '<div onmouseover="selectOverDiv(this,'+i+');" '; htmlStr += 'onmouseout="selectOutDiv(this,'+i+');" '; htmlStr += 'onclick="setSearch(this.innerHTML);" '; htmlStr += 'class="search_link " style="display:block;width:100%;" >' + resultStrArr[i] + '</div>'; searchDIV.innerHTML += htmlStr; } ShowDiv(); x = -1; } } function selectOverDiv(div_value, i) { div_value.className = "search_link_over"; var my_div = document.getElementById("search_div").getElementsByTagName("div") var the_num = my_div.length; for (var k = 0; k < the_num; k++) { selectOut(my_div[k]); if (k == i) { selectOver(my_div[k]) } } isCheckDiv = true; x = i; } function selectOutDiv(div_value,i) { isCheckDiv = false; div_value.className = "search_link"; x = i; } function setSearch(value) { //清空文本框的内容改变事件是因为我们给选中值复制时 该事件会触发 //所以先清空次事件 ClearOS(); document.getElementById("txtSearch").value = value; //设置该属性为false 在调用HiddenDiv函数会隐藏提示结果DIV isCheckDiv = false; HiddenDiv(); //在赋值完成后再次附加修改时间 getOs(); } function ShowDiv() { var content = document.getElementById("txtSearch").value; var divConten = document.getElementById("search_div").innerHTML; if (content != '' && divConten != '') { document.getElementById("search_div").style.display = "block" } else { isCheckDiv = false; HiddenDiv(); } } function HiddenDiv() { if (isCheckDiv == false) { document.getElementById("search_div").style.display = "none"; document.getElementById("search_div").innerHTML = ''; } } var index = -1; //表示当前选中的行索引 function keyDown() { var value = event.keyCode //向上38，向下40，回车13 var the_key = event.keyCode //判断提示DIV是否是现实状态 if (document.getElementById("search_div").style.display != "none") { //获取里面所用行 var my_div = document.getElementById("search_div").getElementsByTagName("div") var the_num = my_div.length; switch (the_key) { case 40: //向下 //判断index是否已经到最下面 if (index == the_num - 1) { index = 0; } else { index++; } //清楚所有选中 for (var i = 0; i < the_num; i++) { selectOut(my_div[i]); } //根据index选中对应索引行 for (i = 0; i < the_num; i++) { if (i == index) { selectOver(my_div[i]) } } break; case 38: //向上 //判断index是否已经到最上面 if (index == 0) { index = the_num-1; } else { index--; } //清楚所有选中 for (var i = 0; i < the_num; i++) { selectOut(my_div[i]); } //根据index选中对应索引行 for (i = 0; i < the_num; i++) { if (i == index) { selectOver(my_div[i]) } } break; case 13: //回车 //将选中的内容放入文本框中 if (my_div[index].innerHTML != null) { setSearch(my_div[index].innerHTML); } break; } } } document.onkeydown = keyDown;