https://files.cnblogs.com/jianjialin/jquery.autocomplete.css
public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write(getProducts(context)); } private string getProducts(HttpContext context) { string sql = "select * from products"; string re = JsonHelper.ConvertDataTableToJson(SqlHelper.ExecuteDataSet(sql).Tables[0]); return re; }
<script type="text/javascript"> /*==========用户自定义方法==========*/ //城市数据 var cityList; //autocomplete选项 var options = { minChars: 1, max: 500, 250, matchContains: true, formatItem: function(row, i, max) {//显示出来的项格式 return i + "/" + max + ": \"" + row.ProductID + "\" [" + row.ProductName + "]"; }, formatMatch: function(row, i, max) { return row.ProductName; //用户输入的内容在哪些数据项里面搜索。例如现在是在productName搜索，若要加上ProductID则为 return row.productID+" "+ row.ProductName; }, formatResult: function(row) { return row.ProductName; } }; //autocomplete初始化函数 function initAutoComplete(json) { $("#inputName").autocomplete(json, options); $("#inputName").result(function(event, data, formatted) {//data 选中的行json对象. formatted是formatMatch返回的值. $("#inputId").val(data.ProductID); }); } /*==========加载时执行的语句==========*/ $(function() { //加载城市数据, 并在回调函数中用返回的数据初始化autocomplete $.getJSON("products.ashx", {}, function(json) { initAutoComplete(json); }) }); </script> <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="ui-widget ui-widget-content ui-corner-all" style=" 700px; padding: 5px;"> <h3> Demo. 应用AutoComplete插件 </h3> <br style="clear: both" /> <div class="formLabel"> <label for="inputName">请输入城市拼音和汉字:</label> </div> <div class="formInput"> <input id="inputName" name="inputName" type="text" /> </div> <br style="clear:both" /> <br style="clear: both" /> <div class="formLabel"> <label for="inputId">城市ID:</label></div> <div class="formInput"> <input id="inputId" name="inputId" type="text" /></div> <br style="clear: both" /> <br style="clear: both" /> </div> </body>