<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>jQuery 仿百度提示框</title>
<script src=”/js/jquery.js” type=”text/javascript”></script>
<link href=”/js/autoComplete/autoComplete.css” rel=”stylesheet” type=”text/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){ } //当回车 或 鼠标点击选中值的时候执行
};
好了。 唯一一个缺点就是 鼠标点击项的时候 不松开会隐藏掉下拉框,具体看我代码,有能力的可以改下~
