jQuery.Autocomplete implements the automatic completion function (detailed explanation)_jquery

1. jquery.autocomplete reference address
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
http://docs.jquery.com/Plugins/Autocomplete
2. Detailed explanation of jquery.autocomplete
Syntax:
autocomplete(urlor data, [options])
Parameters:
url or data: array or url
[options]: Optional, the options are explained as follows:
1) minChars (Number)
The minimum number of characters that the user needs to input before triggering autoComplete, Default: 1, if set to 0, double-click in the input box or Display the list when deleting the content in the input box.
2) width (Number)
Specify the width of the drop-down box, Default: the width of the input element
3) max (Number)
The number of autoComplete drop-down display items, Default: 10
4) delay (Number)
The delay time (in milliseconds) to activate autoComplete after keystrokes. Default: 400 for remote and 10 for local
5) autoFill (Boolean)
Whether to automatically add the user to the next keystroke when selecting The value of the current mouse position is filled into the input box. Default: false
6) mustMatch (Boolean)
If set to true, autoComplete will only allow matching results to appear in the input box. All input by the user is illegal. Characters will not get the drop-down box, Default: false
7) matchContains (Boolean)
determines whether to check the match inside the string when comparing, such as whether ba matches ba in foo bar. Use cache is more important. Do not mix it with autofill.Default: false
8) selectFirst (Boolean)
If set to true, the first value of the autoComplete drop-down list will be automatically selected when the user types the tab or return key. Although it is not selected manually (using keyboard or mouse). Of course, if the user selects an item, then the value selected by the user is used. Default: true
9) cacheLength (Number)
The length of the cache. That is, for How many records should be cached in the result set obtained from the database. Set to 1 to not cache. Default: 10
10) matchSubset (Boolean)
Can autoComplete use caching of server queries? If the cache is for foo Query results, then if the user enters foo, there is no need to retrieve it and the cache is used directly. This option is usually turned on to reduce the load on the server and improve performance. It will only be effective when the cache length is greater than 1. Default: true
11) matchCase (Boolean)
Compares whether the case sensitivity switch is turned on. It is more important when using cache. If you understand the previous option, this is not difficult to understand, just like whether foot should be found in the cache of FOO .Default: false
12) multiple (Boolean)
Whether it is allowed to enter multiple values, that is, use autoComplete multiple times to enter multiple values. Default: false
13) multipleSeparator (String)
If yes Characters used to separate each selection when making multiple selections. Default: ","
14) scroll (Boolean)
Whether to use scroll display when the result set is larger than the default heightDefault: true
15) scrollHeight ( Number)
The scroll height of the auto-complete prompt is expressed in pixel size. Default: 180
16) formatItem (Function)
Use an advanced tag for each item to be displayed. That is, it will be called for each row in the result. For this function, the return value will be displayed in the drop-down list using LI elements. Autocompleter will provide three parameters (row, i, max): the returned result array, the number of rows currently processed (that is, the number of items, from 1 The starting natural number), the number of elements in the current result array is the number of items. Default: none, which means no custom processing function is specified, so that each row in the drop-down list only contains one value.
17) formatResult ( Function)
is similar to formatItem, but you can format the value to be input into the input text box. There are also three parameters, the same as formatItem. Default: none, which means either only data, or using the formatItem provided Value.
18) formatMatch (Function)
Use this function for each row of data to format the data format that needs to be queried. The return value is used by the internal search algorithm. Parameter value row
19) extraParams (Object )
Provide more parameters for the background (usually server-side script). As usual, use a key-value pair object. If the value passed is { bar: 4 }, it will be parsed by autocompleter into my_autocomplete_backend.php?q=foo&bar=4 (assuming the current user has entered foo). Default: {}
20) result (handler) Returns:jQuery
This event will be triggered after the user selects an item. Parameters is:
event: event object. event.type is result.
data: selected data row.
formatted: the value returned by the formatResult function
For example:
$("#singleBirdRemote" ).result(function(event, data, formatted){
//Assign values ​​to other controls after selection, trigger other events, etc.
});
3. Use jquery.autocomplete Tips
1) The data sources 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, such as:
var data = [" c ","java", "php", "coldfusion","javascript"];
var data = [{text:'Link A', url:'/page1'}, {text:'Link B' , url: '/page2'} ];
When using a remote address, the parameters passed in by default are: q (input value), limit (maximum value of the returned result), you can use extraParams to pass in other parameters , and the remote data source requires data in a fixed format, and the return result is: use " "Split each row of data, use "|" to split each element in each row of data, such as:
Backend C# code:

Copy code The 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) Local data source calling method
Method 1:

Copy code The 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 code The 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) Remote data source calling method
Method 1:
Front-end js

Copy code The code is as follows:

$(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 js object
$("#link").attr("href",obj.url);
});
});

Backend C# (mvc) code:

Copy code The code is as follows:

public ContentResult GetUserAccount(string q)
{
string strResult = "";
//...Query data operation. ..
//...Format data...
//The result of formatting is
strResult = "{text:'Link A', url:'/page1'}n {text :'Link B', url: '/page2'} ";
return Content(strResult);
}

Method 2:
Front-end js

Copy code The code is as follows:

$(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);
});
});
}) ;

Backend C# (mvc) code:

Copy code The code is as follows:

publicContentResult Account(string q)
{
string strResult = "";
//...Query data operation. ..
//...Format data...
//The result of formatting is
strResult = "[{"text":"LinkA", "url":"/page1" }, {"text":"LinkB", "url": "/page2"} ]";
return Content(strResult);
}