ASP.NET输入文本框自动提示功能

在ASP.NET Web开发中会经常用到自动提示功能，比如百度搜索。我们只要输入相应的关键字，就可以自动得到相似搜索关键字的提示，方便我们快速的输入关键字进行查询。

那么在ASP.NET中，如果我们需要做个类似的效果，该如何做到呢？

很简单，我们只要借助于一个JQuery强大的插件JQuery AutoComplete来完成这个效果就可以了。这个插件的官方地址为：JQuery AutoComplete，里面也有示例代码。

下面我们将以一个身份证号自动查询为例，来看看JQuery AutoComplete的强大和简洁。

首先我们要准备好插件，可以在官方下面下载下来。

一、aspx页面

在head部分，导入相应js和css。

1 2 3 4 5

< 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部分。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<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的页面部分准备一个页面：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

< 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后台

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

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

如上代码即可实现输入身份证号时自动检索数据库并给出相关信息，当选择某条数据的时候，自动给文本框赋值，减少了人工的输入。

鉴于信息保密，这里就不上传效果图了，读者可以自己动手试一试。

本文转自 guwei4037  51CTO博客，原文链接:http://blog.51cto.com/csharper/1345987