ASP.NET輸入文本框自動提示功能

原文地址：http://blog.csdn.net/chinacsharper/article/details/17473157

在ASP.NET Web開發中會經常用到自動提示功能，比如百度搜索。我們只要輸入相應的關鍵字，就可以自動得到相似搜索關鍵字的提示，方便我們快速的輸入關鍵字進行查詢。

那么在ASP.NET中，如果我們需要做個類似的效果，該如何做到呢？

很簡單，我們只要借助於一個JQuery強大的插件JQuery AutoComplete來完成這個效果就可以了。這個插件的官方地址為：JQuery AutoComplete，里面也有示例代碼。

下面我們將以一個身份證號自動查詢為例，來看看JQuery AutoComplete的強大和簡潔。

首先我們要准備好插件，可以在官方下面下載下來。

一、aspx頁面

在head部分，導入相應js和css。

  

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

 

注意jquery-1.4.2.js一定要在最上面，因為autocomplete插件基於核心jquery.js。至於jquery的版本，讀者可以自行下載最新版。

 

然后繼續寫上核心js部分。

 

<script type="text/javascript">  
    $(function(){  
        $("#<%=txtSfzh.ClientID %>").autocomplete("../services/SearchSyryInfoService.ashx",{  
            width: 500,  
            max: 20,  
            delay: 5,  
            cacheLength: 1,  
            formatItem: function(data, i, max) {  
                return data.toString();  
            },  
            formatResult: function(data) {  
                return data.toString().split(",")[1];  
            }  
        }).result(function(event, data, formatted) {  
            var array = data.toString().split(",");  
            $("#<%=txtXm.ClientID %>").val(array[0]);//姓名  
            $("#<%=txtSfzh.ClientID %>").val(array[1]);//身份證號  
            $("#<%=txtJtzz.ClientID %>").val(array[2]);//家庭住址  
            $("#<%=txtLxdh.ClientID %>").val(array[3]);//聯系電話  
        });  
    });  
</script>  

 

在body的頁面部分准備一個頁面：

 

 

<table cellpadding="0" cellspacing="0" border="1" width="100%">  
            <tr>  
                <td>  
                    <label>  
                        身份證號</label>  
                </td>  
                <td>  
                    <asp:TextBox runat="server" ID="txtSfzh" />  
                </td>  
                <td>  
                    <label>  
                        姓名</label>  
                </td>  
                <td>  
                    <asp:TextBox runat="server" ID="txtXm" />  
                </td>  
            </tr>  
            <tr>  
                <td>  
                    <label>  
                        家庭地址</label>  
                </td>  
                <td>  
                    <asp:TextBox runat="server" ID="txtJtzz" />  
                </td>  
                <td>  
                    <label>  
                        聯系電話</label>  
                </td>  
                <td>  
                    <asp:TextBox runat="server" ID="txtLxdh" />  
                </td>  
            </tr>  
            <tr align="center">  
                <td colspan="4">  
                    <asp:Button ID="btnSearch" runat="server" Text="查詢" Width="80px" OnClick="btnSearch_Click" />   
                    <asp:Button ID="btnReset" runat="server" Text="重置" Width="80px" OnClick="btnReset_Click" />  
                </td>  
            </tr>  
        </table>  

 

二、ashx后台

 

public void ProcessRequest(HttpContext context)  
    {  
        context.Response.ContentType = "text/plain";  
  
        if (context.Request.QueryString["q"] != null)  
        {  
            string key = context.Request.QueryString["q"];  
            if (key.Trim().Length >= 8)//大於等於8位，才去查數據庫。這是為了緩解數據庫查詢的壓力，只當輸入了8位以上身份證以后才進行數據庫檢索。  
            {  
                string keyValues = GetKeyValues(key);  
                context.Response.Write(keyValues);  
            }  
        }  
    }  
  
    public bool IsReusable  
    {  
        get  
        {  
            return false;  
        }  
    }  
  
    public static string GetKeyValues(string key)  
    {  
        BLL bll = new BLL();  
        DataTable dt = bll.GetPersons(key).Tables[0];//通過關鍵字k（k是前台頁面輸入的身份證號碼）到后台去查詢人員信息並返回一個結果集  
        StringBuilder sb = new StringBuilder();  
        foreach (DataRow dr in dt.Rows)  
        {  
            sb.Append(dr["result"].ToString() + "\n");  
        }  
        return sb.ToString().Trim();  
    }  

 

如上代碼即可實現輸入身份證號時自動檢索數據庫並給出相關信息，當選擇某條數據的時候，自動給文本框賦值，減少了人工的輸入。