引入所需文件
<script type="text/javascript" src="JS/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="JS/jquery.autocomplete.min.js"></script> <link href="CSS/jquery.autocomplete.css" rel="stylesheet" />
动态单属性数据源
前台代码：
$(document).ready(function () { $("#txtAutoComplete").autocomplete("AutoComplete.ashx", { max: 10, //列表里的条目数 minChars: 1, //自动完成激活之前填入的最少字符 scrollWidth: 173, //提示的宽度，溢出隐藏 scrollHeight: 200, //提示的高度，溢出显示滚动条 scroll: true, //是否显示滚动条 matchContains: true, //包含匹配，是否只显示匹配项 autoFill: false, //自动填充 //此处实际请求的URL为"AutoComplete.ashx?q='[你在txtAutoComplete中输入的值]'&action='autoComplete'&value='guo'" extraParams: { action: "autoComplete", value: "guo" }, //格式化列表中的条目 row:条目对象,i:当前条目index,max:总条目数 formatItem: function (row, i, max) { //【不用转化为js对象，但必须返回row.toString()】 return row.toString(); }, //配合formatItem使用，作用在于，由于使用了formatItem，所以显示的条目内容有所改变， //而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据 formatMatch: function (row, i, max) { //【不用转化为js对象，但必须返回row.toString()】 return row.toString(); }, //设置用户选择某一条目后文本框显示的内容 formatResult: function (row) { //【不用转化为js对象，但必须返回row.toString()】 return "文本框显示的结果：" + row.toString(); } }).result(function (event, row, formatted) { //获取用户选择的条目 alert(row.toString()); }); }); <body> <form id="form1" runat="server"> 请输入：<input type="text" id="txtAutoComplete" /> </form> </body>
AutoComplete.ashx后台代码：
public class AutoComplete : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //text表示用户在文本框输入的内容 string text = context.Request.QueryString["q"]; string action = context.Request.QueryString["action"]; string value = context.Request.QueryString["value"]; <!--各项之间必须用" "隔开，不能用","隔开--> string strResult = "guo tong chang wang hao bang"; context.Response.Write(strResult); } public bool IsReusable { get { return false; } } }
动态多属性数据源
前台代码：
$(document).ready(function () { $("#txtAutoComplete").autocomplete("AutoComplete.ashx", { max: 10, //列表里的条目数 minChars: 1, //自动完成激活之前填入的最少字符 173, //提示的宽度，溢出隐藏 scrollHeight: 200, //提示的高度，溢出显示滚动条 scroll: true, //是否显示滚动条 matchContains: true, //包含匹配，是否只显示匹配项 autoFill: false, //自动填充 //此处实际请求的URL为"AutoComplete.ashx?q='[你在txtAutoComplete中输入的值]'&action='autoComplete'&value='guo'" extraParams: { action: "autoComplete", value: "guo" }, //格式化列表中的条目，使其以自定义格式显示 //row:条目对象,i:当前条目index,max:总条目数 formatItem: function (row, i, max) { //转换成js对象 【不同点1】 var obj = eval('(' + row + ')'); return i + "/" + max + "： " + obj.key + obj.value; }, //配合formatItem使用，作用在于，由于使用了formatItem，所以显示的条目内容有所改变， //而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据 formatMatch: function (row, i, max) { //转换成js对象 var obj = eval('(' + row + ')'); return "Match：" + obj.key + row.value; }, //设置用户选择某一条目后文本框显示的内容 formatResult: function (row) { //转换成js对象 var obj = eval('(' + row + ')'); return "文本框显示的结果：" + obj.key; } }).result(function (event, row, formatted) { //获取用户选择的条目,并转换成js对象 var obj = eval('(' + row + ')'); alert(obj.key); }); }); <body> <form id="form1" runat="server"> 请输入：<input type="text" id="txtAutoComplete" /> </form> </body>
AutoComplete.ashx后台代码：
public class AutoComplete : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //text表示用户在文本框输入的内容 string text = context.Request.QueryString["q"]; string action = context.Request.QueryString["action"]; string value = context.Request.QueryString["value"]; <!--数据格式【不同点2】--> <!--各项之间必须用" "隔开，不能用","隔开--> string strResult = "{key:"one",value:"第一"} "+ "{key:"two",value:"第二"} "+ "{key:"three",value:"第三"} "+ "{key:"four",value:"第四"} "+ "{key:"five",value:"第五"} "+ "{key:"six",value:"第六"}"; context.Response.Write(strResult); } public bool IsReusable { get { return false; } } }
jquery.autocomplete.min.js文件免费下载地址：http://download.csdn.net/detail/xiaouncle/9618021
jquery.autocomplete.css文件免费下载地址：http://download.csdn.net/detail/xiaouncle/9618024
转摘：http://blog.csdn.net/xiaouncle/article/details/52372974