Use of jquery AutoComplete

I recently started learning jquery and want to automatically display results similar to Google search. So I chose to use the jquery AutoComplete plug-in.

Download the required files, jquery.autocomplete.jsand jquery.autocomplete.css.

Since the data obtained by the control can be obtained through the array and URL methods, I wrote two simple examples to test it.

Front-endCodeAs follows:

 

Code

<% @ Page Language = " C # " Autoeventwireup = " True " Codefile = " AutoComplete. aspx. CS " Inherits = " AutoComplete "   %>

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head Runat = "Server" >
< Title > </ Title >
< Script SRC = "Scripts/jquery-1.4.1-vsdoc.js" Type = "Text/JavaScript" > </ Script >
< Script SRC = "Scripts/jquery. autocomplete. js" Type = "Text/JavaScript" > </ Script >
< Link Href = "Styles/jquery.autocomplete.css" Type = "Text/CSS"   />
< Script Language = "JavaScript" Type = "Text/JavaScript" >
// Directly obtained from Arrays
$ (Document). Ready (( Function (){
VaR Data = [ " Hebei " , " Henan " , " Shandong Province " , " Beijing " , " Tianjin " ];
$ ( " # Txtprovince " ). AutoComplete (data );
// Obtained by the server
$ ( " # Txtuser " ). AutoComplete ( " GetUserName. aspx " );
}
));
</ Script >
</ Head >
< Body >
< Form ID = "Form1" Runat = "Server" >
< Div >
Province: < Input ID = "Txtprovince" Type = "Text"   />
</ Div >
< Div >
User name: < Input ID = "Txtuser" Type = "Text"   /> </ Div >
</ Form >
</ Body >
</ Html >

 

The user name is used to read data from the background, and the corresponding URL isGetUserName. aspx. The. CS file on this page is:

 

Code

Protected   Void Page_load ( Object Sender, eventargs E)
{
// The Default Input key value is Q.
If (Request. querystring [ " Q " ] ! =   Null )
{
String Key = Request. Params [ " Q " ]. Tostring ();
String Result =   "" ;
DB =   New DB ();
String SQL =   " Select username from users where username like' "   + Key +   " %' " ;
Sqldatareader Dr = DB. getreader (SQL );
While (Dr. Read ())
{
Result + = Dr [ " Username " ]. Tostring () +   " \ N " ;
}
If (Result =   "" )
Result =   " Not exists " ;
Response. Write (result );
}
}

 

After writing, you can find that you can implement the desired functions, but there is always a problem with the style. The displayed result list is ugly, as if CSS was not applied. I thought about the problem for a long time. I suddenly found a low-level mistake this morning. I wrote fewer rel = "stylesheet", my God! The server is ready for you.

This is a simple example. Continue learning.