JQuery UI AutoComplete (1)

1, the main properties of AutoComplete:
Source: Three types are supported for specifying the data source in the smart hint drop-down box.
Array , which is mainly used for localization data supply, supports two formats: string array ["Choice1", "Choice2"] and a JSON-formatted array of label and value attributes [{label: "Choice1", Value: "Value1"},.. . ]
string, the remote address link for the AJAX request, returns an array or JSON format string.
function , callback, the most flexible way to return any data source way to achieve auto-completion, which contains two parameters request,response through Request.term to get the value of user input, through response ( Argument) to display the obtained data source.
AutoFocus: When the smart prompt box appears, whether the first item is automatically selected, false by default, or unchecked.
Delay : Performs a search delay after the key, the default is 300ms.
Disabled: Disables auto-completion and defaults to False.
MinLength: The minimum number of characters to be entered to trigger the AutoComplete feature.

2, AutoComplete also provides some useful methods:
close (): Turn off the smart prompt selection box.
destroy (): Destroys the Smart prompt selection box to completely delete the resulting element and restore it to its original state.
disable (): Disables the AutoComplete feature.
enable (): Turn on auto-completion.

3, main events include:
Change (event, UI): Occurs when the value changes, Ui.item is the selected item.
Close (event, UI): Occurs when the smart cue box is closed.
Create (event, UI): Occurs when the smart cue box is created, in this event, Take some control over the appearance.
Focus (event, UI): Occurs when any one of the smart cue list gets the focus Ui.item is the item that gets the focus.
open (event, UI): Occurs when the smart prompt box is open or updated.
response (Event,ui): Occurs before the smart Cue box is displayed after the search is complete. The display item can be processed in this event.
Search (event, UI): Occurs before the request is started, You can return false in this event to cancel the request.
Select (event, UI): Occurs when any item in the Smart Prompt box is selected. The Ui.item is the selected item.

4, AutoComplete program Introduction

First introduce the relevant CSS and JS files, HTML code

<Linkhref=".. /css/jquery-ui.css "rel= "stylesheet" /><Scripttype= "Text/javascript"src=".. /js/jquery-1.9.1.min.js " ></Script><Scripttype= "Text/javascript"src=".. /js/jquery-ui.js "  ></Script><label for= "Language">Search:</lable><inputID= "Language"name= "Language"type= "text">

Here is the local data, the JS code is as follows:

$ ("#language"). AutoComplete ({        ' Chinese ', ' 中文版 ', ' Spanish ', ' Russian ', ' French ', ' Japanese ', ' Korean ', ' German ']    });

When you enter C, the effect is as follows:

5. SOURCE uses tag and value properties to demonstrate

HTML does not change, JS code is as follows:

$ ("#language"). AutoComplete ({        //  static data source, display or fuzzy match according to the label property, when setting the Value property values for the input box        Source: [                 "Chinese", Value:1 },                 "中文版", Value:2 },                 "Spanish", Value:3 },                 "Russian", Value:4 }                 , "French", Value:5 },                 "Japanese", value:6< c17>},                     ]    });

When you enter C in the input box, the value of the input box corresponds to value

JQuery UI AutoComplete (1)