6.jQuery UI Auto-Complete UI

Auto-completion (AutoComplete) is a UI tool that reduces the user's ability to enter complete information. Generally in

Enter the mailbox, search keyword, etc., and then extract the corresponding full string for the user to select.

A Call the AutoComplete () method

$ (' #email '). AutoComplete ({

   Source: [' aaa@163.com ', ' bbb@163.com ', ' ccc@163.com '],

});

Two Modify the AutoComplete () style

Because the AutoComplete () method is the pop-up window, then the mouse hovers over the style. Through Firebug want to get to

Hover the style of the background, 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/xxx.png);

}

Three Properties of the AutoComplete () method

There are two types of auto-completion methods: 1.autocomplete (Options), and options are object-key-value pairs

form, each key value pair represents an option; 2.autocomplete (' action ', param), action

Is the string that operates the dialog method, and Param is an option for options.

AutoComplete appearance options

Property	Default value/Type	Description
Disabled	false/Boolean value	Set to True to prevent auto-completion from appearing.
Source	None/Array	Specifies the data source, which can be local or remote.
MinLength	1/value	The default is 1, and the minimum number of characters to trigger the completion list.
Delay	300/value	The default is 300 milliseconds, and the delay display setting.
AutoFocus	false/Boolean value	When set to True, the first item is automatically selected.

$ (' #email '). AutoComplete ({

   Source: [' aaa@163.com ', ' bbb@163.com ', ' ccc@163.com '],

   disabled:false,

   Minlength:2,

   delay:50,

   autofocus:true,

});

AutoComplete page location options

Property	Default value/Type	Description
Position	None/Object	Using the object's key-value pair assignment, there are two properties: my and at represent coordinates. My is based on the upper-left corner of the target point, at the lower-right corner of the target point as the benchmark.

$ (' #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 the

Provide a callback function when you are in a different state. The This value in these callback functions equals the Div object of the dialog box content, not

is the div for the entire dialog box.

AutoComplete event Options

Event name	Description
Create	When auto-completion is created, the Create method is called, which has two parameters (event, UI). The UI parameter in this event is empty.
Open	When auto-completion is displayed, the open method is called, which has two parameters (event, UI). The UI parameter in this event is empty.
Close	When auto-completion is turned off, the Close method is called, which has two parameters (event, UI). The UI parameter in this event is empty.
Focus	When auto-completion gets focus, it calls the focus method, which has two parameters (event, UI). The UI in this event has a child Property object, item, with two properties: label, text that complements the list, and value that will be entered for the box. The general label and value values are the same.
Select	When auto-completion is selected, the Select method is called, which has two parameters (event, UI). The UI in this event has a child Property object, item, with two properties: label, text that complements the list, and value that will be entered for the box. The general label and value values are the same.
Change	When auto-completion loses focus and content changes, the change method is called, which has two parameters (event, UI). The UI parameter in this event is empty.
Search	When auto-completion is complete, the search method is called, which has two parameters (event, UI). The UI parameter in this event is empty.
Response	When the AutoComplete search is complete, the response method is called before the menu is displayed, which has two parameters (event, UI). The UI parameter in this event has a child object content, which returns the label and value values that can be learned through traversal.

$ (' #email '). AutoComplete ({

   Source: [' aaa@163.com ', ' bbb@163.com ', ' ccc@163.com '],

   disabled:false,

   Minlength:1,

   delay:0,

   focus:function (E, UI) {

      Ui.item.value = ' 123 ';

   },

   select:function (E, U i) {

       ui.item.value = ' 123 ';

   },

   Change:function (E, UI) {

      alert (');

   },

   search:function (E , UI) {

      alert (');

   },

});

AutoComplete (' action ', param) method

Method	return value	Description
AutoComplete (' Close ')	JQuery Object	Turn off auto-completing
AutoComplete (' Disable ')	JQuery Object	Disable Auto-Completing
AutoComplete (' Enable ')	JQuery Object	Enable Auto-Completing
AutoComplete (' Destroy ')	JQuery Object	Remove Auto-completion, block directly
AutoComplete (' Widgets ')	JQuery Object	Get the jquery object for the ToolTip
AutoComplete (' Search ', value)	JQuery Object	Get a matching string at the data source
AutoComplete (' option ', param)	General value	Get the value of the Options property
AutoComplete (' option ', Param,value)	JQuery Object	Set the value of the Options property

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 ');

Gets the auto-complement jquery object
$ (' #email '). AutoComplete (' Widgets ');

Set auto-Complete search
$ (' #email '). AutoComplete (' Search ', ');

Gets the value of the Param option for an options
var delay = $ (' #email '). AutoComplete (' option ', ' delay ');
alert (delay);

Sets the value of the Param option for an options of
$ (' #email '). AutoComplete (' 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.

The On () method triggers a dialog box event

Event name	Description
Autocompleteopen	triggered when displayed
Autocompleteclose	triggered when off
Autocompletesearch	Trigger on Lookup
Autocompletefocus	Trigger when focus is obtained
Autocompleteselect	triggered When selected
Autocompletechange	Trigger when changed
Autocompleteresponse	After the search is complete, display the previous

$ (' #reg '). On (' Autocompleteopen ', function () {

   alert (' triggered when open. ');

});