DropDownList最大的好處是，將Text呈現給用戶，而可以在後臺將用戶選擇的Vaue值存儲起來，但是當選項過多時，用戶操作起來就比較困難。利用jquery.autocomplete製作智能感知文本框，可以很好的解決這個問題。下面以實例來演示實現過程。
1.在頁面添加框架和樣式表的引用。
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" language="javascript"></script>
<script src="Scripts/jquery.autocomplete.js" type="text/javascript" language="javascript"></script>
<link href="Styles/jquery.autocomplete.css" type="text/css" rel="Stylesheet" />
2.在頁面添加需要感知的文本框Text以及需要存儲的文本框Value
<table>
<tr>
<td>名稱:<asp:TextBox ID="txtmc" runat="server" onblur="changeText(this);" Width="150px"></asp:TextBox></td>
<td>編號:<asp:TextBox ID="txtbh" runat="server"></asp:TextBox></td>
</tr>
</table>
3.在頁面Head部分添加如下jquery.autocomplete的調用代碼。其中Autocomplete.aspx頁面是在後面需要添加的新頁面
<script type="text/javascript" language="javascript">
$(function () {
setAutoText();
})
function setAutoText() {
$("#txtmc").autocomplete("Autocomplete.aspx", {
//minChars: 0
//, autoFill: true
mustMatch: true
, matchContains: true
, cacheLength: 0, max: 20, width: 150
, extraParams: { type: function () { return "1"; } }
}).result(function (event, data, formatted) {
if (data) {
var vArr = data[0].split('..,');
if (vArr.length > 0) {
$("#txtbh").val(vArr[0]);
}
}
});
}
//以下函數處理當txtmc沒有符合值時，在失去焦點後，自動清空txtbh中的內容
function changeText(obj) {
if (obj.value != '') {
var vArr = obj.value.split('..,');
if (vArr.length == 2) {
$("#txtbh").val(vArr[0]);
}
else {
$("#txtbh").val('');
}
}
else {
$("#txtbh").val('');
}
}
</script>
4.創建智能感知需要調用的頁面Autocomplete.aspx，在Autocomplete.aspx.cs中添加如下代碼：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data;
using System.Data.SqlClient;
public partial class Autocomplete : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string result = string.Empty;
if (Request.QueryString["q"] != null)
{
if (!string.IsNullOrEmpty(Request.QueryString["q"].ToString()))
{
string strQuery = HttpUtility.UrlDecode(Request.QueryString["q"].ToString());
if (Request.QueryString["type"] != null)
{
string strType = HttpUtility.UrlDecode(Request.QueryString["type"].ToString());
result = getList(strQuery, strType);
}
}
}
Response.Write(result);
Response.End();
}
private string getList(string pQuery, string pType)
{
string strSql = string.Empty;
StringBuilder sb = new StringBuilder();
SqlConnection con = new SqlConnection(" ");
con.Open();
switch (pType)
{
case "1":
strSql = "SELECT TOP 10 bh,mc FROM cfg WHERE bh+'..,'+mc like '%" + pQuery + "%' order by mc ";
SqlDataAdapter sda = new SqlDataAdapter(strSql, con);
DataSet ds = new DataSet();
sda.Fill(ds);
DataTable dt = ds.Tables[0];
if (dt != null && dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
sb.Append(dt.Rows[i]["bh"].ToString() + "..," + dt.Rows[i]["mc"].ToString());
sb.Append("\n");
}
}
break;
}
con.Close();
con.Dispose();
return sb.ToString();
}
}
運行效果如下:
