Asp. NET input text box auto prompt function

Automatic prompting functions, such as Baidu Search, are often used in ASP Web development. We just enter the corresponding keywords, we can automatically get similar search keyword prompt, so that we quickly enter the keyword to query.

So in ASP. If we need to do something similar, how do we do that?

Very simply, we just need to use a jquery powerful plugin jquery autocomplete to do this. The official address for this plugin is: JQuery AutoComplete, which also has sample code.

The following is an example of an automatic ID number query, which looks at the power and simplicity of the jquery autocomplete.

First of all, we have to prepare the plug-ins, can be downloaded under the official.

One, aspx page

In the Head section, import the appropriate JS and CSS.

    <Scriptsrc=".. /js/jquery-1.4.2.js "type= "Text/javascript"></Script>    <Linkhref=".. /js/jquery.autocomplete.css "rel= "stylesheet"type= "Text/css" />    <Scriptsrc=".. /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 on their own.

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) {returndata.tostring (); }, FormatResult:function(data) {returnData.tostring (). Split (",") [1]; }}). Result (function(event, data, formatted) {varArray = 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 Phone            });    }); </script>

Prepare a page in the body's page section:

    <Tablecellpadding= "0"cellspacing= "0"Border= "1"width= "100%">                <TR>                    <TD>                        <label>ID Number</label>                    </TD>                    <TD>                        <Asp:textboxrunat= "Server"ID= "Txtsfzh" />                    </TD>                    <TD>                        <label>name</label>                    </TD>                    <TD>                        <Asp:textboxrunat= "Server"ID= "Txtxm" />                    </TD>                </TR>                <TR>                    <TD>                        <label>Home Address</label>                    </TD>                    <TD>                        <Asp:textboxrunat= "Server"ID= "Txtjtzz" />                    </TD>                    <TD>                        <label>Contact Phone</label>                    </TD>                    <TD>                        <Asp:textboxrunat= "Server"ID= "TXTLXDH" />                    </TD>                </TR>                <TRAlign= "Center">                    <TDcolspan= "4">                        <Asp:buttonID= "Btnsearch"runat= "Server"Text= "Query"Width= "80px"OnClick= "btnSearch_Click" />&nbsp;                        <Asp:buttonID= "Btnreset"runat= "Server"Text= "Reset"Width= "80px"OnClick= "Btnreset_click" />                    </TD>                </TR>            </Table>

Second, ashx backstage

     Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; if(Context. request.querystring["Q"] !=NULL)            {                stringKey = Context. request.querystring["Q"]; if(Key. Trim (). Length >=8)//greater than or equal to 8 bits, only to check the database. This is to alleviate the pressure of the database query, only after the input of more than 8 ID card database retrieval.                 {                    stringKeyValues =getkeyvalues (key); Context.                Response.Write (KeyValues); }            }        }         Public BOOLisreusable {Get            {                return false; }        }         Public Static stringGetkeyvalues (stringkey) {BLL BLL=NewBLL (); DataTable DT= BLL. Getpersons (Key). tables[0];//through the keyword K (k is the front page input ID number) to the background to query the personnel information and return a result setStringBuilder SB =NewStringBuilder (); foreach(DataRow Drinchdt. Rows) {sb. Append (dr["result"]. ToString () +"\ n"); }            returnsb. ToString ().        Trim (); }

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

In view of the confidentiality of information, this is not uploaded here, the reader can try their own hands.

Asp. NET input text box auto prompt function