<style type="text/css" media="screen"> body { font:11px arial; } /*设置提示提示列表上的样式表*/ .search_link { background-color:#FFFFFF; cursor: pointer; line-height:24px; text-indent:6px; } /*设置当鼠标移动到提示列表上的样式表*/ .search_link_over { background-color:#E8F2FE; cursor: pointer; line-height:24px; text-indent:6px; } /*设置显示搜索提示div的样式表*/ #search_div { position:absolute; background-color:#FFFFFF; text-align:left; border:1px solid #000000; border-top:0px; display:none; min-width:553px; width:553px; } /*文本框样式*/ .mainInput { line-height: 26px; height: 28px; width: 550px; font-size: 16px; font-family: "微软雅黑", "宋体", Candara; font-weight: normal; color: #666; margin: auto; border: none; text-indent: 8px; } /*鼠标放上文本框样式*/ .mainInputOver { width:552px; height:30px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #b7b7b7; border-right-color: #d0d0d0; border-bottom-color: #d0d0d0; border-left-color: #d0d0d0; } /*鼠标离开文本框样式*/ .mainInputFocus { width:552px; height:30px; border: 1px solid #41b5f2; } /*点击文本框样式*/ .myBorder { width:552px; height:30px; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; } </style>
（3）aspx页面与ajax_search.js文件的编写
接下来就是一个比较重要的环节了，aspx页面与ajax_search.js文件中包含了整体包括显示与请求的方法例如：
1.页面的实现
<body onkeydown="if(event.keyCode==13)return false;"> <form runat="server"> <div> <div> <input type="text" onblur="HiddenDiv()" alt="SearchCriteria" autocomplete="off" /> </div> <!--该DIV作为现实搜索提示的结果--> <div ></div> </div> </form> </body>
2.根据浏览器创建AJAX对象
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; }
3.创建请求与返回数据的显示
//异步请求服务器获取搜索结果 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 '; htmlStr += 'onmouseout="selectOutDiv(this,'+i+');" '; htmlStr += 'onclick="setSearch(this.innerHTML);" '; htmlStr += 'class="search_link " >' + resultStrArr[i] + '</div>'; searchDIV.innerHTML += htmlStr; } ShowDiv(); x = -1; } }
4.将数据选中数据显示文本框中
上边代码中在循环构建HTML代码时，我们给构建的DIV加入了三个事件分别是：
1
当鼠标放上去时调用selectOverDiv函数传递自己进去
2
当鼠标放上去时调用selectOutDiv函数传递自己进去
3
当鼠标点击DIV时调用setSearch函数传入本身DIV中内容
那么还是来看下这几个方法的实现吧：