ASP. NET input text box automatic prompt function

Automatic prompt function is often used in the development of ASP. NET Web, such as Baidu search. As long as we input the corresponding keywords, we can automatically get similar search keywords prompts, which is convenient for us to quickly input keywords for query.

So in ASP. NET, if we need to do a similar effect, how can we do it?
Quite simply, we only need to use a powerful plug-in of JQuery JQuery AutoComplete to complete this effect. The official address of this plug-in is JQuery AutoComplete, which also has sample code.
Let's take an automatic ID number query as an example to see the power and simplicity of JQuery AutoComplete.
First of all, we should prepare plug-ins, which can be downloaded under the official.
1. 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 src="../js/jquery.autocomplete.js" type="text/javascript"></script> 

Note that jquery-1. 4.2. js1 must be at the top, because the autocomplete plug-in is based on the core jquery. js. As for the version of jquery, readers can download the latest version by 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 number  
    }); 
  }); 
</script> 

Prepare 1 page in the page section of body:

<table cellpadding="0" cellspacing="0" border="1" width="100%"> 
      <tr> 
        <td> 
          <label> 
             ID number </label> 
        </td> 
        <td> 
          <asp:TextBox runat="server" ID="txtSfzh" /> 
        </td> 
        <td> 
          <label> 
             Name </label> 
        </td> 
        <td> 
          <asp:TextBox runat="server" ID="txtXm" /> 
        </td> 
      </tr> 
      <tr> 
        <td> 
          <label> 
             Home address </label> 
        </td> 
        <td> 
          <asp:TextBox runat="server" ID="txtJtzz" /> 
        </td> 
        <td> 
          <label> 
             Contact number </label> 
        </td> 
        <td> 
          <asp:TextBox runat="server" ID="txtLxdh" /> 
        </td> 
      </tr> 
      <tr align="center"> 
        <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> 
      </tr> 
    </table> 

2. ashx Background

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)// Greater than or equal to 8 Bit, just to check the database. This is to relieve the pressure of database query, only when you enter 8 Database retrieval will not be carried out until the ID card is above.  
      { 
        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 keywords k ( k It is the ID number entered on the foreground page) to inquire about the personnel information in the background and return it 1 Result sets  
    StringBuilder sb = new StringBuilder(); 
    foreach (DataRow dr in dt.Rows) 
    { 
      sb.Append(dr["result"].ToString() + "\n"); 
    } 
    return sb.ToString().Trim(); 
  } 

The above code can automatically retrieve the database and give relevant information when inputting the ID number, and automatically assign values to the text box when selecting a certain piece of data, thus reducing manual input.

The above is the whole content of this paper, hoping to help everyone's study.