前端文本框自動填充


說明:可以在文本框雙擊或者輸入后,自動跑去數據庫調取數據形成下拉列表,可以說是自動填充

前提插件:

<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);
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM