前端文本框自动填充

说明：可以在文本框双击或者输入后，自动跑去数据库调取数据形成下拉列表，可以说是自动填充

前提插件：

<link href="../../Jequery/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../../Jequery/jquery-1.3.2.js" type="text/javascript"></script>　　　　
<script src="../../Jequery/jquery.autocomplete.js" type="text/javascript"></script>

前端代码

$("#PO_NUM").autocomplete('<%=this.ResolveUrl("~/AP_ImageIndexing/Indexing/getData.ashx") %>', { -----------文本框的ID
minChars: 0,
max: 12,　　----显示下拉行数
autoFill: false,
mustMatch: false,
matchContains: true,
scrollHeight: 500,
dataType: "json",
extraParams: { PO_NUM: "s" },　　---传递的参数
parse: function (data) {
return $.map(data, function (row) {
return {
data: row,　　---返回数据行
value: row.Key,　　----显示的值
result: row.Value　　-----实际值（一般都写一样的）
}
});
}
,
formatItem: function (item) {
return item.Key;
}
});

$("#PO_NUM").result(function (e, item, formatted) {　　----选中下拉只后执行的内容

});

后端代码

一般放在一般处理程序中ashx.cs中

if (context.Request.Params["PO_NUM"] != null)　　---传递的参数
{
context.Response.ContentType = "text/html";
sql = "SELECT top {0} PO_NUM FROM AP_PO WHERE PO_NUM LIKE('%{1}%') group by PO_NUM ";
string POnum = Sql.ToString(context.Request.QueryString["q"].Trim());　　----写死的，封装了文本框的内容
int iLimit = Sql.ToInteger(context.Request.QueryString["limit"]);　　-----封装的是显示下拉行数
List<SearchResult> list = APSqlProcs.GetRecordsByAccountID(iLimit, POnum, sql, "PO_NUM");
output = Json.ListToJson<SearchResult>(list, "");　　　　----回调的数据是json
context.Response.Write(output);
}