Jquery UI AutoComplete plug-in official documentation: http://jqueryui.com/demos/autocomplete/
Jquery UI: http://jqueryui.com/download of AutoComplete
Foreground htmlCode
View code
<HTML xmlns = " Http://www.w3.org/1999/xhtml " >
<Head runat = " Server " >
<Title> </title>
<SCRIPT type = " Text/JavaScript " Src = " Scripts/jquery-1.4.1.min.js " > </SCRIPT>
<SCRIPT type = " Text/JavaScript " Src = " Scripts/jquery. autocomplete. js " > </SCRIPT>
<Link type = " Text/CSS " Rel = " Stylesheet " Href = " Styles/jquery.autocomplete.css " />
<SCRIPT type = " Text/JavaScript " >
$ (Function (){
VaR selector = $ ( " # Textbox1 " );
Selector. AutoComplete (
{
Minlength: 1 ,
Source: function (request, response ){
$. Ajax ({
URL: " Getdrug. ashx? Key = " + Encodeuri (selector. Val ()),
Datatype: " JSON " ,
Data: request,
Success: function (data ){
Response (data );
}
});
},
Select: function ( Event , UI ){
Alert ( " You choose label: " + UI. item. Label + " Value: " + UI. item. value );
Selector. Val (ui. item. Label );
Alert (selector. Val ());
Return False ;
}
});
});
</SCRIPT>
</Head>
<Body>
<Form ID = " Form1 " Runat = " Server " >
<Div>
<Asp: textbox id = " Textbox1 " Runat = " Server " > </ASP: textbox>
</Div>
</Form>
</Body>
</Html>
Background Ajax code
View code
/// <Summary>
/// Summary Description for getdrug
/// </Summary>
Public Class Getdrug: ihttphandler
{
Public Void Processrequest (httpcontext context)
{
String Key = context. Request. querystring [ " Key " ];
If (! String . Isnullorempty (key ))
{
List <drug> drugs = New List <drug> ();
Drugs. Add ( New Drug () {value = 1 , Label = " YY " });
Drugs. Add ( New Drug () {value = 2 , Label = " Xx " });
Drugs = drugs. Where (t => T. Label. Contains (key). tolist ();
String Result = newtonsoft. JSON. jsonconvert. serializeobject (drugs );
Context. response. contenttype = " Text/plain " ;
Context. response. Write (result );
}
}
Public Bool Isreusable
{
Get
{
Return False ;
}
}
}
Public Class Drug
{
Public Int Value { Get ; Set ;}
Public String Label { Get ; Set ;}
}
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
