jquery AutoComplete Auto-complete

Simple usage:

    $ (function () {        var data = "The People ' s Republic of China". Split ("");        $ ("#autocomplete"). AutoComplete (data,{minchars:0}). Result (function (event,data,formatted) {            alert (data);        })    ;    </script>    <input type= "text" id= "AutoComplete"/>

• More parameter Description:
• The first parameter, in addition to local data, can also be a URL request path.
• Configuration Item Parameter Description:
• DataType (String): Data type. Default:text, if the first parameter is a URL address and the JSON data is returned, set this configuration property to ' JSON ';
• Minchars: The number of characters the user needs to enter at least before triggering autocomplete. Default:1, if set to 0, in the input box double-click or delete the contents of the input box to display the list;
• Max: AutoComplete The number of items that are displayed in the drop-down. Default:10;
• Width (number): Specifies the width of the drop-down box. The width of the default:input element;
• Delay (number): The time (in milliseconds) that the AutoComplete is activated after the keystroke. Default: Remote is 400 local 10;
• AutoFill (Boolean): To automatically populate the input box with the value of the user's current mouse when the user chooses. Default:false;
• Mustmatch (Boolean): If set to True,autocomplete only allows matching results to appear in the input box, all users will not get a drop-down box when they enter an illegal character. Default:false;
• 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;
• 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 the user selects an item, Then use the user-selected value. Default:true;
• Cachelength (number): The length of the cache. That is, how many records to cache for the result set taken from the database. Set to 1 for not caching. 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 it is no longer necessary 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;
• 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's cache to find. Default:false;
• Multiple (Boolean): Allows multiple values to be entered multiple times using AutoComplete to enter more than one value. Default:false;
• Multipleseparator (String): Used to separate the characters of each selection when multiple selections are made. Default: ",";
• Scroll (Boolean): Whether to use reel to display default:true when result set is greater than default height;
• ScrollHeight (number): The reel height of the auto-completion hint is represented by the pixel size default:180;
• Formatitem (function): Use advanced labels for each item 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. The autocompleter will provide three parameters (row, I, max): The returned array of results, the number of rows currently being processed (i.e., the number of items, which are the natural numbers starting at 1), and the number of elements in the current result array. 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;
• Formatmatch (function): Use this function for each row of data to format the data that needs to be queried. The return value is used for internal search algorithms. Parameter value row I max;
• FormatResult (Function): Similar to Formatitem, but you can format the values you want to enter into the input text box. There are also three parameters, like Formatitem. Default:none, which means that there is either only data, Either the value provided by the Formatitem is used;
• 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 autocompleter to 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 after the 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.
• });

An example of a slightly more complex point:Local Data source

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%><!    DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
An example of a slightly more complex point:Remote Data source effects:
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%><!    DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >

Chinese support:
When the Chinese input method is opened, the firefox3.0 is the automatic matching of Chinese pinyin, and the input Chinese cannot trigger the match in time, but under my IE6.0, there is no problem.
Cause Analysis: AutoComplete plug-in to user input characters triggered automatic matching is through the "KeyDown" event (can be analyzed jquery.autocomplete.js line 92nd), in IE6, when the input method is opened, the characters entered will not be triggered " KeyDown ", only the Chinese input has been triggered, so the Chinese input and Latin text no difference, but in firefox3.0, regardless of the input method open No, the button will trigger the" KeyDown "event, so the Chinese input is complete, Automatically matches the part of the Chinese phonetic Alphabet that was just played.
Solution: On-line to find the most practice is to modify the Jquery.autocomplete.js 92nd line, the "KeyDown" replaced with "KeyUp", but this is not the fundamental approach, although this can be changed in Firefox in time to automatically match the input of Chinese, But the original plug-in, enter, tab and other important event mechanism destroyed, such as change, if your input is in a form, the return from the original selection of input into input into the form of direct submission forms, this is not what we want.
My way of doing this is to add an event that triggers a query by the original plugin, which is to re-query (call its internal onchange function) when a character changes in input field, mainly for Firefox, because our system accesses most of IE and Firefox. While Firefox has a change of input event is oninput, so we just in the original Jquery.autocomplete.js 199th (that is, the end of the $input.bind method), insert the following code:
function () {      true);  })


Most reprinted: http://kb.cnblogs.com/a/2351152/
jquery AutoComplete Auto-complete