因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个.
直接贴代码。
[url=/js/autoComplete/autoComplete.css]<script src="/js/autoComplete/jquery.autoComplete.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#txt_company").autoComplete({ url:"ajax.aspx" });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="txt_company" type="text" style="width:468px;" />
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
string keyword = Request["txt_company"];
string jsonArray = "[{\"text\":\"天天有限公司\",\"value\":\"2\"},{\"text\":\"明明有限公司\",\"value\":\"4\"},{\"text\":\"黄黄有限公司\",\"value\":\"4\"}]";
Response.Write(jsonArray);
Response.End();
}
后台只需要返回json格式的 text 和 value值 就可以了。
$.fn.resetEvent(); 这个方法是重新绑定事件, 比如从一个容器 append到另一个容器 事件丢失了, append完可以使用该方法重新绑定事件。下面还有一些参数。
var defaults = {
width: c.width(), //提示框的宽度 默认跟文本框一样
maxheight: 150, //提示框的最大高度
top: 6, //与文本框的上下距离
url: "", //ajax 请求地址
type: "post", //ajax 请求类型
async: false, //是否异步请求
autoLength: 0, //文本长度大于0 就请求服务器
getValue: function(value){ }, //当回车 或 鼠标点击选中值的时候执行
clearValue: function(){ }, //当重新请求时清空Value值
getText: function(text){ } //当回车 或 鼠标点击选中值的时候执行
};
好了。 唯一一个缺点就是 鼠标点击项的时候 不松开会隐藏掉下拉框,具体看我代码,有能力的可以改下~