Jquery-AutoComplete auto recommendation

Jquery-AutoComplete Learning

I. Prerequisites

Http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Jquery support required

Ii. Use

<SCRIPT src = "./jquery-1.3.2.js" type = "text/JavaScript"> </SCRIPT>

<SCRIPT src = "./jquery. autocomplete. js" type = "text/JavaScript"> </SCRIPT>

<LINK rel = "stylesheet" href = "./jquery.autocomplete.css"/>

AutoComplete (URL or data, options) returns: jquery

Enable AutoComplete for an input or textarea

Example

JS Code

VaR DATA = "core selectors attributes traversing manipulation CSS events effects Ajax utilities". Split ("");

$ ("# Example"). AutoComplete (data );

In the preceding example, add AutoComplete for ID Example.

VaR emails = [

{Name: "Peter Pan", to: "peter@pan.de "},

{Name: "Molly", to: "molly@yahoo.com "},

{Name: "forneria Marconi", to: "live@japan.jp "},

{Name: "Master <em> sync </em>", to: "205bw@samsung.com "},

{Name: "dr. <strong> tech </strong> de log", to: "g15@logitech.com "},

{Name: "Don Corleone", to: "don@vegas.com "},

{Name: "MC chick", to: "info@donalds.org "},

{Name: "Donnie Darko", to: "dd@timeshift.info "},

{Name: "quake the net", to: "webmaster@quakenet.org "},

{Name: "dr. Write", to: "write@writable.com "}

];

// The emails array format is as follows: formatitem indicates the display format, formatmatch indicates the Matching content, and formatresult indicates the result content.

$ ("# Suggest13"). AutoComplete (emails ,{

Minchars: 0,

Width: 310,

Matchcontains: True,

AutoFill: false,

Formatitem: function (row, I, max ){

Return I + "/" + MAX + ": \" "+ row. Name +" \ "[" + row. To + "]";

},

Formatmatch: function (row, I, max ){

Return row. Name + "" + row.;

},

Formatresult: function (ROW ){

Return row.;

}

});

Iii. parameter description:

* Minchars (number ):

The number of characters that the user must enter before triggering autocomplete. Default: 1. If it is set to 0, double-click the input box or delete the content in the input box to display the list.

* Width (number ):

Width of the drop-down box. Default: width of the input element

* Max (number ):

AutoComplete drop-down shows the number of projects. Default: 10

* Delay (number ):

The delay time (in milliseconds) for activating AutoComplete after the key is clicked. Default: the remote value is 400 local 10

* AutoFill (Boolean ):

Do you want to automatically enter the user's current mouse value in the input box when the user selects it? default: false

* Mustmatch (booolean ):

If it is set to true, AutoComplete will only allow matching results to appear in the input box. If the user inputs illegal characters, the drop-down box will not be available. Default: false

* Matchcontains (Boolean ):

Determine whether to check the match within the string during comparison, for example, whether Ba matches the BA in Foo bar. It is important to use cache. Do not mix it with AutoFill. Default: false

* Selectfirst (Boolean ):

If it is set to true, the first value of the autocomplete drop-down list is automatically selected when you type the tab or return key, although it is not manually selected (with a keyboard or mouse ). of course, if you select a project, you can use the selected value. default: True

* Cachelength (number ):

The cache length, that is, the number of records to be cached in the result set obtained from the database. set to 1 as not cached. Default: 10

* Matchsubset (Boolean ):

AutoComplete can be used to cache server queries. If the query result of foo is cached, you do not need to retrieve Foo if you enter Foo. this option is usually enabled to reduce the burden on the server and improve performance. it is valid only when the cache length is greater than 1. default: True

* Matchcase (Boolean ):

Whether the case sensitivity switch is enabled for comparison. it is important to use the cache. if you understand the previous option, this is not difficult to understand, just like whether foot needs to be searched in the foo cache. default: false

* Multiple (Boolean ):

Whether multiple values can be input. That is, multiple AutoComplete values can be used to input multiple values. Default: false

* Multipleseparator (string ):

If multiple characters are selected, they are used to separate the selected characters. Default :","

* Scroll (Boolean ):

Whether to use Scroll display when the result set is larger than the default height default: True

* Scrollheight (number ):

The scroll height of the Automatic completion prompt is expressed in pixels by default: 180

* Formatitem (function ):

Use advanced labels for each project to be displayed. this function is called for each row in the result. The returned value is contained in the Li element and displayed in the drop-down list. autocompleter will provide three parameters (row, I, max): The returned result array, the number of rows processed currently (that is, the number of items, which is a natural number starting from 1 ), the number of elements in the current result array is the number of items. default: None, indicating that no custom processing function is specified, so that each row in the drop-down list contains only one value.

* Formatresult (function ):

Similar to formatitem, You Can format the value to be entered in the input text box. there are also three parameters, the same as formatitem. default: None, which indicates either data only or the value provided by formatitem.

* Formatmatch (function ):

Use this function to format the data format to be queried for each row of data. The return value is used by the internal search algorithm. The parameter value row

* Extraparams (object ):

Provides more parameters for the backend (generally server scripts. like the common practice, a key-Value Pair object is used. if the passed value is {bar: 4}, it will be parsed into my_autocomplete_backend.php by autocompleter? Q = Foo & bar = 4 (assuming the current user has entered Foo). Default :{}

* Result (handler) returns: jquery

This event is triggered after you select an item. The parameter is:

Event: event object. event. type is result.

Data: The selected data row.

Formatted: value returned by the formatresult Function

For example:

$ ("# Singlebirdremote"). Result (function (event, Data, formatted ){

// For example, assign values to other controls and trigger other events.

});

4. Notes:

1. Some people on the Internet say that there is a problem with Chinese retrieval. After testing, this version has no problem ^-^

2. When a remote address is used, the default input parameters are Q (input value) and limit (maximum value of the returned result). You can use extraparams to input other parameters.

3. When AutoComplete uses ajax to pass parameters, the get method is used by default, and there is no way to submit post through parameters.

Solution 1: Use new string (request. getparameter ("Q "). getbytes ("iso8859-1"), "UTF-8") Get the parameter value

Solution 2: Modify the jquery. autocomplete. js code, change the get method to the post method, and then refer to the problem that AJAX solves Chinese garbled characters.