1. Jquery.autocomplete Reference Address
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Http://docs.jquery.com/Plugins/Autocomplete
2, Jquery.autocomplete detailed
Grammar:
AutoComplete (Urlor data, [options])
Parameters:
URL or data: array or URL
[Options]: Optional, the options are explained as follows:
1) minchars (number)
The number of characters that the user needs to enter at least before triggering the AutoComplete, default:1, if set to 0, double click in the input box or delete the contents of the input box to display the list.
2) Width (number)
Specifies the width of the Drop-down box, the width of the default:input element
3) max (number)
AutoComplete Drop-down shows the number of items, default:10
4) delay (number)
Delay time (in milliseconds) to activate AutoComplete after keystroke, Default: Remote for 400 local 10
5) AutoFill (Boolean)
To automatically fill the user's current mouse value into the input box when the user chooses, Default:false
6) Mustmatch (Booolean)
If set to True,autocomplete will only allow matching results to appear in the input box, all when the user entered an illegal character will not get the Drop-down box, Default:false
7) Matchcontains (Boolean)
Determines whether a match is to be viewed inside a string when comparing, such as whether BA matches the BA in Foo Bar. It is important to use caching. Don't mix with autofill. Default:false
8) Selectfirst (Boolean)
If set to True, the first value of the AutoComplete drop-down list is automatically selected when the user types the tab or return key, although it is not manually selected (with the keyboard or mouse). Of course, if a user selects an item, the user selects the value. Default:true
9) cachelength (number)
The length of the cache. That is, how many records to cache for a result set fetched from the database. Set to 1 is not cached. default:10
Matchsubset (Boolean)
AutoComplete can you use caching for server queries, and if you cache query results for Foo, you don't need to retrieve them if you enter Foo? Use caching directly. This option is usually turned on to reduce the burden on the server to improve performance. will only be valid if the cache length is greater than 1 o'clock. Default:true
One) matchcase (Boolean)
Compare whether the case sensitive switch is turned on. It is important to use caching. If you understand an option, this is not difficult to understand, just like foot to the cache of Foo. Default:false
) Multiple (Boolean)
Whether to allow multiple values to be entered is to use AutoComplete multiple times to enter multiple values. Default:false
Multipleseparator (String)
When multiple selections are used, separate the characters from each selection. Default: ","
Scroll (Boolean)
Whether the scroll display is used when the result set is greater than the default height default:true
) scrollheight (number)
The scroll height of the auto completion prompt is expressed in pixel size default:180
Formatitem (Function)
Use advanced labels for each item that you want to display. This function is called for each row in the result, and the return value is displayed in the Drop-down list with the LI element. Autocompleter provides three arguments (row, I, max): The returned array of results, the number of rows currently being processed (that is, the first few items, is the natural number starting from 1, the number of elements in the current result array is the number of items. Default:none, which means that no custom handler function is specified, so that each row in the Drop-down list contains only one value.
FormatResult (Function)
Similar to Formatitem, but you can format the values that you want to enter into the input text box. There are also three parameters, like Formatitem. Default:none, which means either only data, or values supplied with Formatitem.
) Formatmatch (Function)
Use this function for each row of data to format the data that you want to query. The return value is used for the internal search algorithm. Parameter Value row
) Extraparams (Object)
Provides additional parameters for the background (typically the server-side script). As is often the case, a key value pair object is used. If the pass value is {Bar:4}, it will be autocompleter parsed into My_autocomplete_backend.php?q=foo &bar=4 (assuming the current user has entered Foo). Default: {}
Result (Handler) Returns:jquery
This event is triggered when a user selects an item, and the parameter is:
Event: Events object. Event.type for result.
Data: Selected rows.
Value returned by the Formatted:formatresult function
For example:
$ ("#singleBirdRemote"). Result (function (event, data, formatted) {
Assign values to other controls, trigger other events, etc.
});
3, Jquery.autocomplete use skills
1 The data source that Jquery.autocomplete need 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 you use a remote address, the parameters that it passes in by default are: Q (input value), limit (returns the maximum value of the result), you can use Extraparams to pass in other parameters, and the remote data source is the need for fixed-format data, return the result: use "\ n" split each row of data, each row of data using "|" Split each element, such as:
Background C # code:
Copy Code code as follows:
String data = "c++\n java \ php \ coldfusion \ n JavaScript";
String data = "{text: ' Linka ', url: '/page1 '} \ n {text: ' Link B ', url: '/page2 '}";
4. Jquery.autocomplete Example
1 method of calling local data source
Method 1:
Copy Code code 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 code 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. Method of calling remote data data source
Method 1:
Front desk JS
Copy Code code 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 JS Object
$ ("#link"). attr ("href", obj.url);
});
});
</script>
Background C # (MVC) Code:
Copy Code code as follows:
Public Contentresult Getuseraccount (string q)
{
String strresult = "";
//... Querying Data Operations ...
//... Format Data ...
The result of the format completion is
strresult = "{text: ' link A ', url: '/page1 '}\n {text: ' link B ', url: '/page2 '}";
Return Content (strresult);
}
Method 2:
Front desk JS
Copy Code code 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 Code code as follows:
Publiccontentresult account (String q)
{
String strresult = "";
//... Querying Data Operations ...
//... Format Data ...
The result of the format completion is
strresult = "[{\ text\": \ "Linka\", \ "url\": \ "/page1\"}, {\ "text\": \ "linkb\", \ "url\": \ "/page2\"}] ";
Return Content (strresult);
}
