aspx页面
需要引用的文件：
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
script：
<script type="text/javascript" language="javascript">
$().ready(function() {
$.ajax({ contentType: "application/json",
url: "AutoComplete.ashx",
dataType: "json",
success: function (msg) {
$("#reg_XIAOQU").autocomplete(msg, {
minChars: 1, //最少输入字条
max: 40,
autoFill: false, //是否选多个,用","分开
mustMatch: false, //是否全匹配, 如数据中没有此数据,将无法输入
matchContains: true, //是否全文搜索,否则只是前面作为标准
scrollHeight: 220,
200,
multiple: false,
formatItem: function (row, i, max) { //显示格式
return "<span>" + row.alladress + "</span>"; },
formatMatch: function (row, i, max) { //以什么数据作为搜索关键词,可包括中文,
return row.alladress; },
formatResult: function (row) { //返回结果
return row.alladress; }
}).result(function (event, data, formatted) {
alert(data.alladress); //根据最终返回的数据做处理
}); } });
});
</script>
后台代码处理页AutoComplete.ashx：
using System;
using System.Web;
using System.Data;
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class AutoComplete : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
ServiceWS myWS = new ServiceWS(); //实例化数据操作类
string sql = "Select alladress From LIVINGAREA";
DataSet ds = myWS.GetDsFromSql(sql);
if (ds.Tables[0]!=null) {
string data = DbHelper.DataTable2Json(ds.Tables[0]);
context.Response.Write(data);
context.Response.Flush();
context.Response.End();
}
}
public bool IsReusable {
get { return false; }
}
}
效果图：
