Page:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Test. aspx. cs" Inherits = "web_Test" %>
<! 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> test </title>
<Link type = "text/css" rel = "stylesheet"/>
<Link href = "../css/jquery.ui.all.css" rel = "stylesheet" type = "text/css"/>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<! -- Solve the problem that the drop-down list box is overwritten by jquery. bgiframe -->
<Script type = "text/javascript" language = "javascript" src = "../js/jQui/jquery. bgiframe-2.1.1.js"> </script>
<Script type = "text/javascript" language = "javascript" src = "../js/jQui/jquery. ui. core. js"> </script>
<Script type = "text/javascript" language = "javascript" src = "../js/jQui/jquery. ui. widget. js"> </script>
<Script type = "text/javascript" language = "javascript" src = "../js/jQui/jquery. ui. mouse. js"> </script>
<! -- Jquery. ui. autocomplete -->
<Script type = "text/javascript" language = "javascript" src = "../js/jQui/jquery. ui. autocomplete. js"> </script>
<Script language = "javascript" type = "text/javascript">
$ (Function (){
$ ("# TxtTest"). autocomplete ({
MinLength: 1,
Source: function (request, response ){
$. Ajax ({
Url: "../ajax/GetAllWords. ashx ",
DataType: "json ",
Data: request,
Success: function (data ){
Response (data );
}
});
}
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Input id = "txtTest" type = "text"/>
</Div>
</Form>
</Body>
</Html>
Background:
Copy codeThe Code is as follows:
<% @ WebHandler Language = "C #" Class = "GetAllWords" %>
Using System;
Using System. Web;
Public class GetAllWords: IHttpHandler
{
Public void ProcessRequest (HttpContext context)
{
If (context. Request. QueryString ["term"]! = Null & context. Request. QueryString ["term"]! = "")
{
Context. Response. Clear ();
Context. Response. Charset = "UTF-8 ";
Context. Response. Buffer = true;
Context. Response. ContentEncoding = System. Text. Encoding. UTF8;
Context. Response. ContentType = "text/plain ";
Context. Response. Write (GetLikeUserName (context. Request. QueryString ["term"]);
Context. Response. Flush ();
Context. Response. Close ();
Context. Response. End ();
}
}
/// <Summary>
/// Splice json
/// </Summary>
/// <Param name = "key"> keyword </param>
/// <Returns> </returns>
Private String GetLikeUserName (string key)
{
Jhg. BLL. web_wordManager wordManager = new jhg. BLL. web_wordManager ();
// Search. 10 keywords are returned.
String [] listWord = wordManager. GetSearchWord (key, 10 );
System. Text. StringBuilder sbstr = new System. Text. StringBuilder ("[");
Int ct = listWord. Length;
For (int I = 0; I <ct; I ++)
{
Sbstr. Append ("\" "+ listWord [I] + "\"");
If (I = ct-1)
Sbstr. Append ("]");
Else
Sbstr. Append (",");
}
Return sbstr. ToString ();
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}
Note:
File: jquery.ui.autocomplete.css
. Ui-autocomplete {position: absolute; cursor: default ;}
Remove: position: absolute;
: