Jquery.autocomplete Implement auto-complete function-Search prompt function

$ (function () {

var availabletags=["ads", "ABC", "ACC"];

$ ("#tags"). AutoComplete ({source:availabletags});

});

<input type= "text" id= "tags" >

Grammar:
AutoComplete (Urlor data, [options])

Parameters:
URL or data: array or URL
[Options]: optional, Options explained below:
1) minchars (number)
The user must enter at least the number of characters before triggering AutoComplete, Default:1, if set to 0, double-click inside 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 displays the number of items, default:10
4) delay (number)
Delay time (in milliseconds) of activating AutoComplete after keystroke, Default: Remote is 400 local 10
5) AutoFill (Boolean)
Do you want to automatically populate the input box with the value of the user's current mouse when the user chooses, Default:false
6) Mustmatch (Booolean)
If set to True,autocomplete only allows matching results to appear in the input box, all users who enter illegal characters will not get a drop-down box, Default:false
7) Matchcontains (Boolean)
Determines whether a match is to be viewed inside the string when comparing, such as whether BA matches the BA in Foo Bar. It is important to use the cache. 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 a keyboard or mouse). Of course, if the user selects an item, the user selects the value. Default:true
9) cachelength (number)
The length of the cache. That is, the number of records to cache for the result set taken from the database. Set to 1 is not cached. default:10
Matchsubset (Boolean)
AutoComplete can use a cache of server queries, if the query results for Foo are cached, then if the user enters Foo there is no need to retrieve it. Use caching directly. This option is typically turned on to reduce the burden on the server to improve performance. Only valid if the cache length is greater than 1 o'clock. Default:true
One) matchcase (Boolean)
Compares whether the case sensitive switch is turned on. It is important to use the cache. If you understand the previous option, this is not difficult to understand, like Foot to Foo in the cache to find. default:false
Multiple (Boolean)
Allows multiple values to be entered, using AutoComplete multiple times to enter multiple values. Default:false
Multipleseparator (String)
If multi-select, use to separate the characters of each selection. Default: ","
Scroll (Boolean)
Whether to use the reel display when the result set is greater than the default height default:true
ScrollHeight (number)
The reel height of the AutoComplete hint 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 inclusion. Autocompleter will provide three parameters (row, I, max): The returned array of results, the number of rows currently processed (that is, the first few items, is the natural number starting at 1), the number of elements in the current result array is the number of items. Default:none, which indicates that a custom handler function is not specified so that each row in the drop-down list contains only one value.
FormatResult (Function)
Similar to Formatitem, but it is possible to format the values that will be entered into the input text box. There are also three parameters, like Formatitem. Default:none, which indicates either only data, or values provided 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 internal search algorithms. Parameter Value row
Extraparams (Object)
Provides additional parameters for the background (typically a server-side script). As is the case with a key-value pair object. If the passed value is {bar:4}, it will be parsed by Autocompleter into My_autocomplete_backend.php?q=foo &bar=4 (assuming that the current user has entered Foo). Default: {}
Result (Handler) Returns:jquery
This event is triggered when a user selects an item, with the following parameters:
Event: Events object. Event.type is the result.
Data: The selected rows.
The value returned by the Formatted:formatresult function
For example:
$ ("#singleBirdRemote"). Result (function (event, data, formatted) {
Assign values to other controls after selection, triggering other events, etc.
});

Tips for using

The data source that Jquery.autocomplete needs 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, it defaults to the parameters that are: Q (input value), limit (which returns the maximum value of the result), you can use Extraparams to pass in other parameters, and the remote data source is the data that needs to be fixed, returning the result: use "\ n" to split each row of data, using "|" in each row Split each element

Instance:

Background C # code:

) method for calling local data sources
Method 1:

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:

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) Calling method of remote data data source
Method 1:
Front desk JS

The 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 JS Object
$ ("#link"). attr ("href", obj.url);
});
});
</script>

Background C # (MVC) Code:

The code is 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

The 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:

The code is 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);
}

Jquery.autocomplete Implement auto-complete function-Search prompt function