說明:可以在文本框雙擊或者輸入后,自動跑去數據庫調取數據形成下拉列表,可以說是自動填充
前提插件:
<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);
}