Jquery UI AutoComplete Simple API

Important : Similar to configuration options, the AutoComplete plug-in method is not called directly , and is autocomplete() indirectly invoked through methods. For example:

$ ("#title"). AutoComplete ("Method name", "Parameter 1", "Parameter 2");

List of AutoComplete methods close ()

Turn off the menu for auto-complete display.

$ ("#title"). AutoComplete ("close");

Destroy ()

Completely remove the AutoComplete feature.

$ ("#title"). AutoComplete ("destroy");

Disable ()

Disables AutoComplete.

$ ("#title"). AutoComplete ("Disable");

Enable ()

Enable AutoComplete.

$ ("#title"). AutoComplete ("Enable");

Instance ()

Returns an object instance of AutoComplete. If the specified element does not have an associated instance, it is returned undefined .

$ ("#title"). AutoComplete ("instance");

option ([Optionname [, value]])

Sets or returns the configuration options for AutoComplete. The method has the following 4 forms:

// form One: Returns all configuration options in the form of an object.  var options = $ ("#title"). AutoComplete ("option" ); // form Two: Get individual configuration options based on option name var isdisabled= $ ("#title"). AutoComplete ("option", "Disabled" ); // Form Three: Sets the value of the specified configuration option true  ); // Form Four: Set the value of one or more configuration options in the form of an object true, "delay": 500});

Search ([value])

Triggers the search event, and if the event is not canceled, AutoComplete invokes the data source to display the menu. If no argument is specified for it value , it will use the value of the current INPUT element (if specified, using the specified value value).

$ ("#title"). AutoComplete ("Search", "Chin");

Widgets ()

Returns a JQuery object that matches a menu element that actually matches a DIV element within which to place the HTML content of the display menu. Although menu items are created and destroyed on the fly, the menu elements themselves are not created and destroyed repeatedly. It is created at initialization time and then reused.

$ ("#title"). AutoComplete ("widget");

JQuery UI AutoComplete supports event handling, and we can listen to and process the corresponding events by binding handlers for the events.

AutoComplete events can be set in the form of configuration options at initialization time, for example:

$ ("#title" ). AutoComplete ({  function/* / }});

You can also add a handler function for the specified event of AutoComplete by using the JQuery event binding method. This allows AutoComplete events to be handled in the same way as the common click,mouseover events, using JQuery's event methods. For example:

// Autocompletechange is the change event for the AutoComplete plugin // AutoComplete Event full name is "AutoComplete" + "specific event name"  function(event, UI) {    /** / });

Event List Change event for AutoComplete

When the input box loses focus, the event is triggered if its input changes. The full name of the event autocompletechange .

$ ("#title" ). AutoComplete ({    function(event, UI) {        // event is the current events object The/c6>                //  UI object has only one item property, which represents the data source object that corresponds to the currently selected menu item        //  The object has a label and Value property, and other custom (if any) properties        //  If there are currently no selected menu items, this item property is null    }});

Close Event

The event is triggered when the menu is hidden (off). The full name of the event autocompleteclose . Not every change event is accompanied by a close event.

$ ("#title" ). AutoComplete ({    function(event, UI) {        // event is the current events object /c6>                //  UI object is empty, just to be consistent with the parameter signatures of other events     }});

Create Event

This event is triggered when AutoComplete is created. The full name of the event autocompletecreate .

$ ("#title" ). AutoComplete ({    function(event, UI) {        // event is the current events object /c6>                //  UI object is empty, just to be consistent with the parameter signatures of other events     }});

Focus Event

This event is triggered when either menu item has the focus, and the event is triggered only when the menu item receives focus through keyboard interaction . The full name of the event autocompletefocus . Its default behavior is to change the text content of the input box to the property value of the currently selected item value .

Canceling the default behavior of the event ( Event.preventdefault () ) prevents the value of the input box from being changed, but does not prevent the menu item from getting focus.

$ ("#title" ). AutoComplete ({    function(event, UI) {        // event is the current events object The/c6>                //  UI object has only one item property, which represents the data source object for the currently focusable menu item        //  The object has a label and Value property, and other properties of the custom (if any)     });

Open Event

The event is triggered when the menu is displayed (open) or updated. The full name of the event autocompleteopen .

$ ("#title" ). AutoComplete ({    function(event, UI) {        // event is the current events object /c6>                //  UI object is empty, just to be consistent with the parameter signatures of other events     }});

Response Events

This event is triggered when the AutoComplete search is complete, but the menu is not yet displayed. The full name of the event autocompleteresponse . You can change the data by this event to modify the displayed menu contents.

$ ("#title" ). AutoComplete ({    function(event, UI) {        // event is the current events object The/c6>                //  UI object has only one content property, which represents the array data currently used to display the menu        //  Each element is an object with a label and Value property        //  You can change the property to change the displayed menu contents     }});

Search Event

The event is triggered before an auto-completed search is executed. The full name of the event autocompletesearch . If canceled, a request is not started and the menu item is not displayed.

$ ("#title" ). AutoComplete ({    function(event, UI) {        // event is the current events object /c6>                //  UI object is empty, just to be consistent with the parameter signatures of other events     }});

Select Event

This event is triggered when either menu item is selected. The full name of the event autocompleteselect . Its default behavior is to change the text content of the input box to the property value of the currently selected item value .

Canceling the default behavior of the event ( Event.preventdefault () ) prevents the value of the input box from being changed, but does not prevent the menu from being closed.

$ ("#title" ). AutoComplete ({    function(event, UI) {        // event is the current events object The/c6>                //  UI object has only one item property, which represents the data source object for the currently selected menu item        //  The object has a label and Value property, and other properties of the custom (if any)     });

Jquery UI AutoComplete Simple API