JQuery. Autocomplete for Automatic completion (details)

1. jquery. autocomplete reference address
Http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Http://docs.jquery.com/Plugins/Autocomplete
2. jquery. autocomplete
Syntax:
Autocomplete (urlor data, [options])
Parameters:
Url or data: array or url
[Options]: Optional. The options are described as follows:
1) minChars (Number)
The minimum number of characters that the user needs to 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.
2) width (Number)
Specify the width of the drop-down box, Default: the width of the input element
3) max (Number)
AutoComplete drop-down shows the number of projects, Default: 10
4) delay (Number)
The delay time (in milliseconds) for activating autoComplete after the key is clicked. Default: the remote value is 400 local 10.
5) autoFill (Boolean)
Do you want to automatically enter the user's current mouse value in the input box when the user chooses, Default: false
6) mustMatch (Booolean)
If it is set to true, autoComplete only allows matching results to appear in the input box. If the user inputs illegal characters, the drop-down box is not available. Default: false
7) 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
8) 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
9) 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
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
11) 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
12) multiple (Boolean)
Whether multiple values can be input. That is, multiple autoComplete values can be used to input multiple values. Default: false
13) multipleSeparator (String)
If multiple characters are selected, they are used to separate the selected characters. Default :","
14) scroll (Boolean)
Whether to use Scroll display when the result set is larger than the Default height Default: true
15) scrollHeight (Number)
The scroll height of the Automatic completion prompt is expressed in pixels by Default: 180
16) 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.
17) 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.
18) 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
19) 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 :{}
20) 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.
});
3. jquery. autocomplete skills
1) the data source required by jquery. autocomplete can be: local data and remote data.
The local data source is a local js array or a local json object, for example:
Var data = ["c ++", "java", "php", "coldfusion", "javascript"];
Var data = [{text: 'link A', url: '/page1'}, {text: 'link B ', url:'/page2'}];
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, in addition, the remote data source requires data in a fixed format. The returned results are as follows: "\ n" is used to separate each row of data, and "|" is used to separate each element in each row of data, for example:
Background C # code:
Copy codeThe Code is as follows:
String data = "c ++ \ n java \ n php \ n coldfusion \ n javascript ";
String data = "{text: 'linka ', url:'/page1 '} \ n {text: 'link B', url: '/page2 '}";

4. jquery. autocomplete instance
1) method of calling the local data source
Method 1:
Copy codeThe Code is as follows:
$ ("# Tags"). autocomplete (["c ++", "java", "php", "coldfusion", "javascript"], {
Width: 320,
Max: 4,
Highlight: false,
Multiple: true,
MultipleSeparator :"",
Scroll: true,
ScrollHeight: 300
});

Method 2:
Copy codeThe Code is as follows:
Var data = [{text: 'link A', url: '/page1'}, {text: 'link B ', url:'/page2'}];
$ ("..."). Autocomplete (data ,{
FormatItem: function (item ){
Return item. text;
}
}). Result (function (event, item ){
Location. href = item. url;
});

2) how to call a remote data source
Method 1:
Front-end js
Copy codeThe Code is as follows:
<Scripttype = "text/javascript">
$ (Document). ready (function (){
$ ("# Login"). focus (). autocomplete ("/ajax/Account ",{
FormatItem: function (row, I, max ){
Var obj = eval ("(" + row + ")"); // convert to js object
Return obj. Text;
},
FormatResult: function (row ){
Var obj = eval ("(" + row + ")"); // convert to js object
Return obj. Text;
}
}). Result (function (event, item ){
Var obj = eval ("(" + item + ")"); // convert to a js object
$ ("# Link"). attr ("href", obj. url );
});
});
</Script>

Background C # (mvc) code:
Copy codeThe Code is as follows:
Public ContentResult GetUserAccount (string q)
{
String strResult = "";
//... Query data operations...
//... Format the data...
// The result of format completion is
StrResult = "{text: 'link A', url: '/page1'} \ n {text: 'link B ', url:'/page2 '}";
Return Content (strResult );
}

Method 2:
Front-end js
Copy codeThe Code is as follows:
<Scripttype = "text/javascript">
$ (Document). ready (function (){
$. GetJSON ("/ajax/Account", function (data ){
$ ("# Login"). focus (). autocomplete (data ,{
FormatItem: function (item, I, max ){
Return item. Text;
},
FormatResult: function (item ){
Return item. Text;
}
}). Result (function (event, item ){
$ ("# Link"). attr ("href", item. url );
});
});
});
</Script>

Background C # (mvc) code:
Copy codeThe Code is as follows:
PublicContentResult Account (string q)
{
String strResult = "";
//... Query data operations...
//... Format the data...
// The result of format completion is
StrResult = "[{\" text \ ": \" LinkA \ ", \" url \ ": \"/page1 \ "},{ \" text \": \ "LinkB \", \ "url \": \ "/page2 \"}] ";
Return Content (strResult );
}