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

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

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

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

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

一、aspx頁面

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

<code><</code><code>script</code> <code>src</code><code>=</code><code>"../js/jquery-1.4.2.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>link</code> <code>href</code><code>=</code><code>"../js/jquery.autocomplete.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"../js/jquery.autocomplete.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></</code><code>script</code><code>></code>

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

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

<code><script type=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>$(</code><code>function</code><code>(){</code>

<code> </code><code>$(</code><code>"#<%=txtSfzh.ClientID %>"</code><code>).autocomplete(</code><code>"../services/SearchSyryInfoService.ashx"</code><code>,{</code>

<code> </code><code>width: 500,</code>

<code> </code><code>delay: 5,</code>

<code> </code><code>cacheLength: 1,</code>

<code> </code><code>formatItem: </code><code>function</code><code>(data, i, max) {</code>

<code> </code><code>return</code> <code>data.toString();</code>

<code> </code><code>formatResult: </code><code>function</code><code>(data) {</code>

<code> </code><code>return</code> <code>data.toString().split(</code><code>","</code><code>)[1];</code>

<code> </code><code>}).result(</code><code>function</code><code>(event, data, formatted) {</code>

<code> </code><code>var</code> <code>array = data.toString().split(</code><code>","</code><code>);</code>

<code> </code><code>$(</code><code>"#<%=txtXm.ClientID %>"</code><code>).val(array[0]);</code><code>//姓名</code>

<code> </code><code>$(</code><code>"#<%=txtSfzh.ClientID %>"</code><code>).val(array[1]);</code><code>//身份證号</code>

<code> </code><code>$(</code><code>"#<%=txtJtzz.ClientID %>"</code><code>).val(array[2]);</code><code>//家庭住址</code>

<code> </code><code>$(</code><code>"#<%=txtLxdh.ClientID %>"</code><code>).val(array[3]);</code><code>//聯系電話</code>

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

<code><</code><code>table</code> <code>cellpadding</code><code>=</code><code>"0"</code> <code>cellspacing</code><code>=</code><code>"0"</code> <code>border</code><code>=</code><code>"1"</code> <code>width</code><code>=</code><code>"100%"</code><code>></code>

<code> </code><code><</code><code>label</code><code>></code>

<code> </code><code>身份證号</</code><code>label</code><code>></code>

<code> </code><code><</code><code>asp:TextBox</code> <code>runat</code><code>=</code><code>"server"</code> <code>ID</code><code>=</code><code>"txtSfzh"</code> <code>/></code>

<code> </code><code>姓名</</code><code>label</code><code>></code>

<code> </code><code><</code><code>asp:TextBox</code> <code>runat</code><code>=</code><code>"server"</code> <code>ID</code><code>=</code><code>"txtXm"</code> <code>/></code>

<code> </code><code>家庭位址</</code><code>label</code><code>></code>

<code> </code><code><</code><code>asp:TextBox</code> <code>runat</code><code>=</code><code>"server"</code> <code>ID</code><code>=</code><code>"txtJtzz"</code> <code>/></code>

<code> </code><code>聯系電話</</code><code>label</code><code>></code>

<code> </code><code><</code><code>asp:TextBox</code> <code>runat</code><code>=</code><code>"server"</code> <code>ID</code><code>=</code><code>"txtLxdh"</code> <code>/></code>

<code> </code><code><</code><code>tr</code> <code>align</code><code>=</code><code>"center"</code><code>></code>

<code> </code><code><</code><code>td</code> <code>colspan</code><code>=</code><code>"4"</code><code>></code>

<code> </code><code><</code><code>asp:Button</code> <code>ID</code><code>=</code><code>"btnSearch"</code> <code>runat</code><code>=</code><code>"server"</code> <code>Text</code><code>=</code><code>"查詢"</code> <code>Width</code><code>=</code><code>"80px"</code> <code>OnClick</code><code>=</code><code>"btnSearch_Click"</code> <code>/> </code>

<code> </code><code><</code><code>asp:Button</code> <code>ID</code><code>=</code><code>"btnReset"</code> <code>runat</code><code>=</code><code>"server"</code> <code>Text</code><code>=</code><code>"重置"</code> <code>Width</code><code>=</code><code>"80px"</code> <code>OnClick</code><code>=</code><code>"btnReset_Click"</code> <code>/></code>

<code> </code><code></</code><code>table</code><code>></code>

二、ashx背景

<code>public</code> <code>void</code> <code>ProcessRequest(HttpContext context)</code>

<code> </code><code>context.Response.ContentType = </code><code>"text/plain"</code><code>;</code>

<code> </code><code>if</code> <code>(context.Request.QueryString[</code><code>"q"</code><code>] != </code><code>null</code><code>)</code>

<code> </code><code>string</code> <code>key = context.Request.QueryString[</code><code>"q"</code><code>];</code>

<code> </code><code>if</code> <code>(key.Trim().Length >= 8)</code><code>//大于等于8位，才去查資料庫。這是為了緩解資料庫查詢的壓力，隻當輸入了8位以上身份證以後才進行資料庫檢索。</code>

<code> </code><code>string</code> <code>keyValues = GetKeyValues(key);</code>

<code> </code><code>context.Response.Write(keyValues);</code>

<code> </code><code>public</code> <code>bool</code> <code>IsReusable</code>

<code> </code><code>return</code> <code>false</code><code>;</code>

<code> </code><code>public</code> <code>static</code> <code>string</code> <code>GetKeyValues(</code><code>string</code> <code>key)</code>

<code> </code><code>DataTable dt = bll.GetPersons(key).Tables[0];</code><code>//通過關鍵字k（k是前台頁面輸入的身份證号碼）到背景去查詢人員資訊并傳回一個結果集</code>

<code> </code><code>StringBuilder sb = </code><code>new</code> <code>StringBuilder();</code>

<code> </code><code>foreach</code> <code>(DataRow dr </code><code>in</code> <code>dt.Rows)</code>

<code> </code><code>sb.Append(dr[</code><code>"result"</code><code>].ToString() + </code><code>"\n"</code><code>);</code>

<code> </code><code>return</code> <code>sb.ToString().Trim();</code>

如上代碼即可實作輸入身份證号時自動檢索資料庫并給出相關資訊，當選擇某條資料的時候，自動給文本框指派，減少了人工的輸入。

鑒于資訊保密，這裡就不上傳效果圖了，讀者可以自己動手試一試。

本文轉自 guwei4037 51CTO部落格，原文連結:http://blog.51cto.com/csharper/1345987

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

繼續閱讀

MySQL的4種隔離級别？出現問題

tab滑鼠經過菜單切換

XX系統實施過程問題總結

vue （vue2.0）使用總結(從大體結構總結)

無元件上傳圖檔到資料庫中，最完整解決方案

vue搭建過程及出現問題

【MySQL資料庫】資料庫索引事務1.索引2.事務

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

NOSQL安全攻擊

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

登入plsql 報錯 the account is locked --使用者被鎖

SequoiaDB巨杉資料庫C++驅動概述

layui多任務上傳添加進度條