修改后的智能提示，下拉框的样式兼容了IE6，7，8，9. 没有了之前的css文件和下拉框的html代码。清除了textbox的记忆功能和点击enter时页面回传。只须一个Bonker.js文件即可。
使用非常简单调用bonker.js文件里面的 init(id, url, fun);的方法。
说明：id为输入框的客户端id，url为ajax响应的地址。多条数据用逗号分隔。fun为当选择下拉框的一条数据后执行的函数
id和url为必须传的参数。fun为可选参数。没有则不用填写
js文件代码：
bonker.js文件内容
//初始化，为text绑定事件，定义url，回调函数fun(可选)var bonkerDiv;var bonkerFun;var txtId;function init(id, url, fun) { txtId = id; if (url) { bonkerUrl = url; } else { return; } if (fun) { bonkerFun = fun; } textControl = document.getElementById(id); //清除输入框记忆功能 textControl.autocomplete = "off"; if (textControl.attachEvent) { textControl.attachEvent("onkeyup", main); textControl.attachEvent("onkeypress", pressEnter); } else { textControl.addEventListener("keyup", main, false); textControl.addEventListener("keypress", pressEnter, false); }}//阻止输入enter，页面回传function pressEnter(ev) { if (window.event) { ev = window.event; } if (ev.keyCode == 13) { if (navigator.userAgent.indexOf("MSIE") > 0) ev.returnValue = false; else ev.preventDefault(); }}//处理键盘事件主要是enter 向上 向下键function main(ev) { if (window.event) { ev = window.event; } if (ev.keyCode == 40) { divNext(); } else if (ev.keyCode == 38) { divPre(); } else if (ev.keyCode == 13) { bonkerFunction(); bonkerDiv.style.display = "none"; return false; } else { bonkerData = textControl.value; if (bonkerData.length == 0 && bonkerDiv) { bonkerDiv.style.display = "none"; } else { getData(textControl.value, textControl); } }}//创建xmlhttp对象var xhr = function () { if (!arguments.callee.single) { var fns = [ function () { return new XMLHttpRequest(); }, function () { return new ActiveXObject('Msxml2.XMLHTTP'); }, function () { return new ActiveXObject('Microsoft.XMLHTTP'); }, ]; for (var i = 0, n = fns.length; i < n; i++) { try { fns[i](); arguments.callee.single = fns[i]; break; } catch (e) { } } return arguments.callee.single(); } else { return arguments.callee.single(); }}//ajax获取数据 数据以逗号分开function getData(va, obj) { var xmlHttp = xhr(); xmlHttp.open("POST", bonkerUrl, true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { showData(obj, xmlHttp.responseText); } } xmlHttp.send(va);}//兼容获取offsetTop和offsetLeftfunction getAbsoluteOffsetTop(obj) { var top = obj.offsetTop; while (obj = obj.offsetParent) top += obj.offsetTop; return top;}function getAbsoluteOffsetLeft(obj) { var left = obj.offsetLeft; while (obj = obj.offsetParent) left += obj.offsetLeft; return left;}//展示数据，动态生成下拉框，为每个选项绑定事件function showData(obj, result) { var resArr = result.split(","); bonkerDiv = document.getElementById("showDivBonker"); if (!bonkerDiv) { bonkerDiv = document.createElement("div"); bonkerDiv.id = "showDivBonker"; bonkerDiv.style.display = "none"; bonkerDiv.style.position = "absolute"; bonkerDiv.style.border = "1px solid #817F82"; bonkerDiv.style.zIndex = "9999"; bonkerDiv.style.backgroundColor = "#ffffff"; document.body.appendChild(bonkerDiv); var bonkerBody = document; if (bonkerBody.attachEvent) { bonkerBody.attachEvent("onmousedown", showBonkerBlur); } else { bonkerBody.addEventListener("mousedown", showBonkerBlur, false); } } var bonkerTop = getAbsoluteOffsetTop(obj); var bonkerLeft = getAbsoluteOffsetLeft(obj); bonkerDiv.style.top = (bonkerTop + obj.offsetHeight) + "px"; bonkerDiv.style.left = bonkerLeft + "px"; bonkerDiv.style.width = obj.offsetWidth + "px"; bonkerDiv.style.height = obj.offsetHeight * resArr.length + "px"; bonkerDiv.style.display = "inline"; bonkerTotalLength = resArr.length; bonkerLength = -1; var innerStr = ""; for (var item in resArr) { innerStr += " " + resArr[item] + " "; } bonkerDiv.innerHTML = innerStr;}function showBonkerBlur(ev) { var divTarget = ev.srcElement ? ev.srcElement : ev.target; if (divTarget.id.indexOf("bonker") < 0 && divTarget.id != txtId) bonkerDiv.style.display = "none";}//点击每个选项执行的函数function setText(obj) { textControl.value = obj.innerHTML; bonkerFunction(); bonkerDiv.style.display = "none";}//鼠标移动到选项执行function setColor(obj) { if (bonkerLength != -1) { document.getElementById("bonker" + bonkerLength).style.backgroundColor = ""; } obj.style.backgroundColor = "#EBEBEB"; bonkerLength = (Number)(obj.id.replace(/bonker/, ""));}//鼠标移走时执行function clearColor(obj) { obj.style.backgroundColor = "";}//向下键 执行函数function divNext() { try { if (bonkerLength != -1) { document.getElementById("bonker" + bonkerLength).style.backgroundColor = ""; } bonkerLength++; if (bonkerLength == bonkerTotalLength) { bonkerLength = -1; } if (bonkerLength == -1) { textControl.value = bonkerData; } else { var obj = document.getElementById("bonker" + bonkerLength); obj.style.backgroundColor = "#EBEBEB"; textControl.value = obj.innerHTML; } } catch (e) { return; }}//向上键 执行函数function divPre() { try { if (bonkerLength != -1) { document.getElementById("bonker" + bonkerLength).style.backgroundColor = ""; } else { bonkerLength = bonkerTotalLength; textControl.value = bonkerData; } bonkerLength--; if (bonkerLength == -1) { textControl.value = bonkerData; } else { var obj = document.getElementById("bonker" + bonkerLength); obj.style.backgroundColor = "#EBEBEB"; textControl.value = obj.innerHTML; } } catch (e) { return; }}function bonkerFunction() { if (bonkerFun) { bonkerFun(); }}
前台html文件
关键字:
AjaxHandler.ashx文件内容
<%@ WebHandler Language="C#" class="AjaxHandler" %>using System;using System.Web;using System.IO;public class AjaxHandler : IHttpHandler{ public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; StreamReader sr = new StreamReader(context.Request.InputStream); string arg = sr.ReadToEnd(); context.Response.Write(arg+"1,ddfds ,dsfsdf,dsfsd,sdfsdf,ff,s,d,t,y"); } public bool IsReusable { get { return false; } }}