20151217jqueryui--Auto-Complete tool

Auto-completion (autocomplete) is a UI tool that reduces the user's ability to enter complete information. Generally in the loss
Enter the mailbox, search keywords, etc., and extract the corresponding complete string for the user to select.
A Call the AutoComplete () method

$ (' #email '). AutoComplete ({source: [' [email protected] ', ' [email protected] ', ' [email protected] '],});

Two Modify the AutoComplete () style
Because the AutoComplete () method is the pop-up window, then the mouse hovers over the style. We want to get to hover through Firebug
When the background of the style, you can directly through the jquery.ui.css inside find the corresponding CSS.

Instead of modifying the CSS in the UI, replace it directly with Style.css. Ui-menu-item a.ui-state-focus {background:url (. /img/ui_header_bg.png);}

Note: Other modification scenarios are similar.

Three Properties of the AutoComplete () method
There are two forms of the auto-complement method: 1.autocomplete (Options), the options are the parameters of the object key-value pairs,
Each key-value pair represents an option, 2.autocomplete (' action ', param), and the action is the character of the Action dialog box method
String, param is an option for options.

$ (' #email '). AutoComplete ({source: [' [email protected] ', ' [email protected] ', ' [email protected] '],disabled:false, Minlength:2,delay:50,autofocus:true,});

　　

$ (' #email '). AutoComplete ({position: {my: ' Left center ', in: ' Right Center '}});

Four Events for the AutoComplete () method
In addition to property settings, the AutoComplete () method provides a number of events. These events can give a variety of different
Provides a callback function when the state is The This value in these callback functions equals the Div object of the dialog box content, not the entire dialog box
The Div.

$ (' #email '). AutoComplete ({source: [' [email protected] ', ' [email protected] ', ' [email protected] '],disabled:false, Minlength:1,delay:0,focus:function (E, UI) {ui.item.value = ' 123 ';},select:function (E, UI) {ui.item.value = ' 123 ' ;},change:function (E, UI) {alert (");},search:function (E, UI) {alert (");},});

　　

Turn off auto-complete $ (' #email '). AutoComplete (' close ');//Disable Auto-complete $ (' #email '). AutoComplete (' disable ');//enable auto-complete $ (' #email '). AutoComplete (' Enable ');//delete auto-complete $ (' #email '). AutoComplete (' destroy ');//Get auto-complement JQuery object $ (' #email '). AutoComplete (' search$ (' #email '). AutoComplete (' Search ', ');//Gets the value of the Param option for an options var delay = $ (' #email '). AutoComplete (' option ', ' delay ');///Set the value of the Param option for the options $ (' #email '). Dialog (' option ', ' delay ', 0);

Five Use on () in AutoComplete
In the event of AutoComplete, an event method that is handled using the on () method is provided.

$ (' #reg '). On (' Autocompleteopen ', function () {alert (' triggered when open! ‘);});

　　

20151217jqueryui--Auto-Complete tool