As long as there are three files:
One JS plug-in: autocomplete.jsand autocomplete.css. This is a plug-in provided on the official jquery website;
Their: http://jqueryui.com/demos/autocomplete/
One is a general processing program;
One is the apsx page. Check the following code;
Front-end:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
ShowUserList ($ ("# TextBox1"), "LoginTest. ashx ");
// TextBox1 is the ID of the text box, And loginTest. ashx is the general processing program of the request.
Function ShowUserList (obj, url ){
$. GetJSON (
Url,
Function (msg ){
Var names = new Array ();
Msg = msg. Table;
Var names = new Array ();
For (var I = 0; I <msg. length; I ++ ){
Names. push (msg [I]. loginName );
}
Obj. focus (). autocomplete (names );
}
);
}
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
Username: <asp: TextBox ID = "TextBox1" runat = "server"> </asp: TextBox>
<Asp: Button ID = "Button1" runat = "server" Text = "login"/>
</Div>
</Form>
</Body>
The background is a general processing program:
Copy codeThe Code is as follows:
Public class LoginTest: IHttpHandler
{
String str;
Public void ProcessRequest (HttpContext context)
{
GetUserName ();
Context. Response. Write (str );
}
Public bool IsReusable
{
Get
{
Return false;
}
}
Private void getUserName ()
{
DataSet ds = SqlHelper. BuildDataSet ("select * from login", CommandType. Text );
Str = ConvertJson. ToJson (ds );
}
}
Running result: