Asp. NET input text box Automatic prompt function _ practical skills

In ASP.net web development will often use the automatic prompt function, such as Baidu search. As long as we enter the corresponding keyword, we can automatically get similar search keyword prompts to facilitate our fast input keyword query.

So in asp.net, if we need to do a similar effect, how do we do that?
Very simply, we can do this with the help of a jquery powerful plug-in jquery autocomplete. The official address for this plugin is: JQuery autocomplete, which also has sample code.
Below we will take an ID card number automatically inquires for example, see the jquery AutoComplete strong and concise.
First of all we have to prepare plug-ins, can be downloaded under the official.
One, aspx page
in the Head section, import the corresponding JS and 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" 
 
. /js/jquery.autocomplete.js "type=" Text/javascript "></script> 

Note that jquery-1.4.2.js must be on top because the AutoComplete plugin is based on the core jquery.js. As for the jquery version, readers can download the latest version themselves.
Then continue to write the core JS section.

<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]);//Name 
      $ ("#<%=txtsfzh.clientid%>"). Val (array[1))/ID number 
      $ ("#<%=txtjtzz.clientid%>"). Val (array[2])/home address 
      $ ("#<%=txtlxdh.clientid%>"). Val (array[ 3];//contact telephone 
    } 
); </script> 

In the body section of the page to prepare a page:

<table cellpadding= "0" cellspacing= "0" border= "1" width= "100%" > <tr> <td> &L t;label> identification number </label> </td> <td> <asp:textbox runat= "Ser 
        Ver "id=" Txtsfzh "/> </td> <td> <label> name </label> 
      </td> <td> <asp:textbox runat= "Server" id= "Txtxm"/> </td> </tr> <tr> <td> <label> Home Address </label> &L t;/td> <td> <asp:textbox runat= "Server" id= "Txtjtzz"/> </td> & Lt;td> <label> Tel </label> </td> <td> 
        ; Asp:textbox runat= "Server" id= "Txtlxdh"/> </td> </tr> <tr align= "center" > &LT;TD colspan= "4"> <asp:button id=" btnsearch "runat=" server "text=" query "width=" 80px "onclick=" btnSearch_Click "/> <asp:button id= "btnreset" runat= "Server" text= "reset" width= "80px" onclick= "Btnreset_click"/> </td& 
      Gt 
 </tr> </table>

Second, ashx backstage

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)//is greater than or equal to 8 bits before checking the database. This is to alleviate the pressure of database query, only after the input of more than 8 ID card after the database retrieval. 
      { 
        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];//through the keyword K (k is the front page input ID number) to the background to query personnel information and return a result set 
    StringBuilder sb = new StringBuilder (); 
    foreach (DataRow dr in Dt. Rows) 
    { 
      sb. Append (dr["result"). ToString () + "\ n") 
    ; 
    Return SB. ToString (). Trim (); 
  } 

If the code can be implemented to enter the ID card automatically retrieve the database and give relevant information, when the selection of a data, automatically to the text box assigned value, reducing the manual input.

The above is the entire content of this article, I hope to help you learn.