js文件代码：

                               bonker.js文件内容

/***********************华丽的分割线*************************/

   

//初始化，为text绑定事件，定义url，回调函数fun(可选)
var bonkerDiv;
var bonkerFun;
function init(id, url, fun) {
    if (url) {
        bonkerUrl = url;
    } else { return; } if (fun) {
        bonkerFun = fun;
    }
    textControl = document.getElementById(id);
    if (textControl.attachEvent) {
        textControl.attachEvent("onkeyup", main);
    } else {
        textControl.addEventListener("keyup", main, false);
    }
}
//处理键盘事件主要是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";
    }
    else {
        bonkerData = textControl.value;
        if(bonkerData.length==0 && bonkerDiv){
 bonkerDiv.style.display = "none";
 }else{
        getData(textControl.value, textControl);
 }
    }
}
//ajax获取数据 数据以逗号分开
function getData(va, obj) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("POST", bonkerUrl, true);
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            showData(obj, xmlHttp.responseText);
        }
    }
    xmlHttp.send(va);
}
//展示数据，动态生成下拉框，为每个选项绑定事件
function showData(obj, result) {
    var resArr = result.split(",");
    bonkerDiv = document.getElementById("showDivBonker");
    bonkerDiv.style.top = (obj.offsetTop + obj.offsetHeight) + "px";
    bonkerDiv.style.left = obj.offsetLeft + "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 += "<div id='bonker" + item + "' style='height:" + obj.offsetHeight + "px;cursor:pointer;width:100%;' onclick='setText(this);' onmouseover='setColor(this);' onmouseout='clearColor(this);'>" + resArr[item] + "</div>";
    }
    bonkerDiv .innerHTML = innerStr;
}
//点击每个选项执行的函数
function setText(obj) {
    textControl.value = obj.innerHTML;
    bonkerFunction();
    bonkerDiv.style.display = "none";
}
//鼠标移动到选项执行
function setColor(obj) {
    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();
 }
}

/***********************华丽的分割线*************************/

 

                             bonker.css 文件内容

/***********************华丽的分割线*************************/

#showDivBonker
        {
            border: 1px solid #817F82;
            position: absolute;
            z-index: 9999;
            display: none;
        }

/***********************华丽的分割线*************************/

                                 前台html文件

/***********************华丽的分割线*************************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="bonker.js" type="text/javascript"></script>
    <link href="bonker.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        window.onload = function () {
            init("myText", "AjaxHandler.ashx", btnclick);//调用封装的方法init（文本框id，后台ajax对应的地址，响应完执行的函数名）
        }
        function btnclick() {
            alert(document.getElementById("myText").value);
        }
    </script>
</head>
<body>关键字:<input id="myText" type="text" />
    <input type="button"  value="搜索" id="btnSearch" onclick="btnclick();" />
    <div id="showDivBonker">
    </div>
</body>
</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;
        }
    }

}

/***********************ｏｖｅｒ*************************/