Home > Developer > JavaScript
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.
The front-end code is as follows:
Copy codeThe Code is as follows:
<% @ 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 the array
$ (Document). ready (function (){
Var data = ["Hebei Province", "Henan Province", "Shandong", "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>
Username: <input id = "txtUser" type = "text"/> </div>
</Form>
</Body>
</Html>
The user name is used to read data from the background, and the corresponding URL is GetUserName. aspx. The. cs file on this page is:
Copy codeThe Code is as follows:
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
