Usage of the Automatic completion function of text input in the jQueryUI library _ jquery

This article mainly introduces the usage of the text input auto-completion function in the jQueryUI library, and focuses on the use of the suffix auto-completion function when entering common email addresses, for more information, see autocomplete. It is a UI tool that can reduce user input. Generally
Enter the email address, search keyword, and then extract the complete string for the user to choose.

1. Call the autocomplete () method

$('#email').autocomplete({    source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],  }); 

2. Modify the autocomplete () style
Because the autocomplete () method is a pop-up window, and then hover the mouse over the style. You can get it through Firebug
The format of the background when the suspension occurs. You can directly find the corresponding CSS through jquery.ui.css.

// Replace style.css directly with CSS in the ui. ui-menu-item a. ui-state-focus {background: url (../img/xxx.png );}

3. attributes of the autocomplete () method
The Automatic completion method has two forms: 1. autocomplete (options). options is an object key-value pair.
Parameters, each key-Value Pair represents an option; 2. autocomplete ('action', param), action
Is the string of the Operation dialog box method, And param is an option of options.

Autocomplete appearance options

Attribute	Default Value/Type	Description
Disabled	False/Boolean Value	If this parameter is set to true, auto-completion is disabled.
Source	None/Array	Specifies the data source, either local or remote.
MinLength	1/value	The default value is 1. The minimum number of characters in the trigger Completion list.
Delay	300/value	The default value is 300 milliseconds, and the delay display settings are as follows.
AutoFocus	False/Boolean Value	If it is set to true, the first project 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

Attribute	Default Value/Type	Description
Position	None/Object	Assign a value using the key-value pair of the object. There are two attributes: my and. Coordinates. My is based on the top left corner of the target point, The bottom right corner of the target point is the reference.

$('#email').autocomplete({    position : {     my : 'left center',     at : 'right center'    }  }); 

4. Events of the autocomplete () method
In addition to attribute settings, the autocomplete () method also provides a large number of events. These events can be
Callback functions are provided in different States. The value of this in these callback functions is equal to the p object in the dialog box content, no
Is the p of the entire dialog box.
Autocomplete event options

Autocomplete event options

Event name	Description
Create	The create method is called when auto-completion is created. The method has two Parameter (event, ui ). The ui parameter in this event is null.
Open	When auto-completion is displayed, the open method is called, which has two Parameter (event, ui ). The ui parameter in this event is null.
Close	When auto-completion is disabled, the close method is called. This method has two Parameter (event, ui ). The ui parameter in this event is null.
Focus	When auto-completion is used to obtain the focus, the focus method is called. The method has two Parameters (event, ui ). The ui in this event has a sub-property object item, There are two attributes: label, the text displayed in the Completion list; value, The value of the box to be input. Generally, the 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 sub-property object item, There are two attributes: label, the text displayed in the Completion list; value, The value of the box to be input. Generally, the label and value values are the same.
Change	When the focus is lost and the content changes, change is called. Method, which has two parameters (event, ui ). Ui parameters in this event Is empty.
Search	After the auto-completion search is complete, the search method is called. Two parameters (event, ui ). The ui parameter in this event is null.
Response	After the auto-completion search is completed Response method, which has two parameters (event, ui ). In this event The ui parameter of has a child object content, which returns the label and value Value, which 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 = '000000';}, select: function (e, ui) {ui. item. value = '000000';}, change: function (e, ui) {alert ('');}, search: function (e, ui) {alert ('') ;},}); autocomplete ('action', param) Method
 
 

  
  

    Autocomplete ('action', param) Method 
  
  
  
 
   
 
    
Method
 
    
Return Value
 
    
Description
 
   
 
   
 
    
Autocomplete ('close ')
 
    
JQuery object
 
    
Disable auto-completion
 
   
 
   
 
    
Autocomplete ('disable ')
 
    
JQuery object
 
    
Disable auto-completion
 
   
 
   
 
    
Autocomplete ('enable ')
 
    
JQuery object
 
    
Enable auto-completion
 
   
 
   
 
    
Autocomplete ('deststroy ')
 
    
JQuery object
 
    
Delete auto-completion and block directly
 
   
 
   
 
    
Autocomplete ('widget ')
 
    
JQuery object
 
    
Get the jQuery object prompted by the tool
 
   
 
   
 
    
Autocomplete ('search', value)
 
    
JQuery object
 
    
Obtain matching strings from the data source
 
   
 
   
 
    
Autocomplete ('option', param)
 
    
General Value
 
    
Get the options Attribute Value
 
   
 
   
 
    
Autocomplete ('option', param, value)
 
    
JQuery object
 
    
Set the options Attribute Value
 
   
 
  
 
 
$ ('# Reg'). on ('autocompleteopen', function () {alert ('triggered upon opening! ');});

5. Automatic mailbox completion
By automatically completing the function callback function of the source attribute, You can dynamically set the data source to achieve
Complete the mailbox function.

1. Data Source function
The source of the UI can be an array or a function callback function. Provides built-in
Set two parameters to a dynamic data source.

$ ('# Email '). autocomplete ({source: function (request, response) {alert (request. term); // you can obtain the value response (['aaa', 'aaaaa', 'aaaaaaa', 'bb']). // display completion result },});

Note: The response here will not filter irrelevant results based on your search keyword, but will present all the results
. Because the source data source itself is dynamically changed, it is customized to give up the built-in search capability of the system.

2. Automatic mailbox completion

$ ('# Email '). autocomplete ({autoFocus: true, delay: 0, source: function (request, response) {var hosts = ['qq. com ', '2017. com ', '2017. com ', 'gmail. com ', 'hotmail. com '], // start term = request. term, // obtain the input value ix = term. indexOf ('@'), // @ name = term, // user name host = '', // domain name result = []; // result // The first result is self-input result. push (term); if (ix>-1) {// if there is @, name = term. slice (0, ix); // obtain the username host = term. slice (ix + 1 ); // Get domain name} if (name) {// obtain the domain name var findedHosts = (host? $. Grep (hosts, function (value, index) {return value. indexOf (host)>-1 ;}): hosts), // findedResults in the final list = $. map (findedHosts, function (value, index) {return name + '@' + value;}); // Add a self-input result = result. concat (findedResults);} response (result );},});