Use jquery AutoComplete to give a suggested entry like Google

WeekFinally, an example is provided to show the suggestion items based on the user input. The recommended items are randomly spliced.

Due to limited energy, it cannot be guaranteed in Multiple blogsArticleYou can view the latest content at the following address. Please understand:

Http://code.google.com/p/zsharedcode/wiki/JQueryElementAutoCompleteDoc

Download the resourceDownload jqueryelement sampleSection 1Download exampleCode

This article describesAutoCompleteThe following table lists the functions and tips of the widget:

* Preparation

* Source attribute

* Array

* Address

* Function

* Delay attributes

* Minlength attribute

* Other attributes and events

Preparation

Make sure thatDownload jqueryelement. dllDownloadJqueryelementThe latest version.

Use commands to reference the following namespace:

 <%  @ Register assembly  =  "  Zoyobar. Shared. Panzer. jqueryelement  "  
Namespace =  "  Zoyobar. Shared. Panzer. UI. jqueryui. plusin  "  
Tagprefix  =  "  Je  "  %> 
 <% @ Register assembly  =  "  Zoyobar. Shared. Panzer. jqueryelement  "  
Namespace  =  "  Zoyobar. Shared. Panzer. Web. jqueryui  "  
Tagprefix =  "  Je  "  %> 

In addition to namespaces, you also need to referenceJqueryuiTo download the script and style of the ResourceDownload jqueryelement. dllThe compressed package downloaded in this section contains a custom StyleJqueryui, If you need a more simplified style, you can download in http://jqueryui.com/download:

 <  Link  Type  = "Text/CSS" REL  = "Stylesheet"  Href  = "[Style path]/jquery-ui-1.8.15.custom.css"  /> 
 <  Script  Type  = "Text/JavaScript"  SRC  = "[Script path]/jquery-1.6.2.min.js"  > </  Script  > 
 < Script  Type  = "Text/JavaScript"  SRC  = "[Script path]/jquery-ui-1.8.15.custom.min.js"  > </  Script  > 

Source attribute

SourceAttribute isAutoCompleteOne of the important attributes, including recommended entries, can be an array, an address of the returned array, or a function.

Array

SourceAttribute can be set toJavascriptArray in the form:['Entry 1', 'entry n']Or[{Label: 'entry 1', value: 'value 1'}, {label: 'entry n', value: 'value n'}]In the latter form, label indicates the text of the suggestion entry, and value indicates the text displayed in the text box after an entry is selected:

 
<JE: AutoCompleteID= "AA"Runat= "Server"
Source= "['Vs 100',' vs 100', 'vs 100',' vs 100', 'vs 100']">
</JE: AutoComplete>
 

In the code above, if you enter vs 201, the recommended entry vs 2010 is displayed.

Address

IfSourceIf the attribute is specified as an address, this address should returnJavascriptArray, in the same form as above:

<JE: AutoCompleteID= "AA"Runat= "Server"
Source= "'HTTP: //.../source. js '">
</JE: AutoComplete>
 

It must be noted thatThe address must be enclosed in single quotes.Otherwise, an error occurs. The source. js above may be as follows:

 
["Tom", "Tomas", "Li", "Lili"]
 

Function

You can use a function to dynamically display recommended entries based on user input, but you do not need to write this function becauseAutoCompleteYou can useSourceasyncAttribute to complete:

 
<JE: AutoCompleteID= "K"Runat= "Server"
Sourceasync-URL= "Google_getitem.ashx">
</JE: AutoComplete>
 

Code,Sourceasync-URLIt is set to google_getitem.ashx, so when the user input changes,AutoCompleteAccess google_getitem.ashx to obtain the recommended entries.ProcessrequestMethod:

 Public   Void Processrequest (httpcontext context)
{
Context. response. contenttype = "  Text/JavaScript  " ;
Context. response. cache. setnostore ();

 String Term = context. request ["  Term  " ];
List < Object > Items = New List < Object > ();

 For ( Int Index = 0 ; Index <term. length; index ++)
Items. Add (term + "  -  " + Term. substring ( 0 , Index + 1 ));

Context. response. Write ( New Javascriptserializer (). serialize (
Samplehelper. createjsonarray (items. toarray ()))
);

 /*  
*[
* "Recommended Entry 1", "Recommended entry 2"
*]
*
*[
* {"Label": "Recommended Entry 1", "value": "actual content 1 "},
* {"Label": "Recommended entry 2", "value": "actual content 2 "}
*]
*  */ 
}

In the codeRequestThe object obtains the term parameter, which isAutoCompleteIt indicates the text currently entered by the user. Based on the term parameter, a recommended entry can be generated andJavascriptReturns an array to the client.

If you need. NetFor details about how to return data in a version, see use ASP. NET or WebService to return JSON.

Delay attributes

DelayAttribute indicates the delay of triggering the matching operation. The default value is 300 milliseconds.

Minlength attribute

MinlengthAttribute indicates the minimum number of characters that trigger the matching operation, that is, the number of characters that the user inputs before matching.

Other attributes and events

AsAutoCompleteFor other properties and events, see http://docs.jquery.com/UI/Autocomplete.

JqueryelementIs open source shared code, you can download the DLL on the http://code.google.com/p/zsharedcode/wiki/Download page orSource code.

Demo of the actual process:Http://www.tudou.com/programs/view/fZu-HcdijZA/, full screen viewing is recommended.