Explain the usage of text input auto-complement function in jquery UI library _jquery

Auto-complement (AutoComplete) is a UI tool that reduces user input to complete information. Generally in
Enter the mailbox, search for keywords, and then extract the appropriate full string for the user to select.

A Call AutoComplete () method

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

Two Modify the AutoComplete () style
because the AutoComplete () method is a flick window, then the mouse hovers over the style. Through Firebug want to get to
Hover when the background of the style, you can directly through the jquery.ui.css inside to find the corresponding CSS.

Do not need to modify the UI CSS, directly replace 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 automatic completion methods: 1.autocomplete (Options), and options are based on the object key value pairs
And each key-value pair represents an option; 2.autocomplete (' action ', param), action
Is the string that operates the dialog method, param is an option for options.

AutoComplete appearance Options

Property	Default value/Type	Description
Disabled	false/Boolean value	Set to TRUE to prevent automatic completion from being displayed.
Source	None/Array	Specifies the data source, either local or remote.
MinLength	1/value	The default is 1, which triggers the minimum number of characters to be entered in the complement list.
Delay	300/value	The default is 300 milliseconds, and delay display settings.
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 Position Options

Property	Default value/Type	Description
Position	None/Object	Using the object's key value pairs to assign values, there are two properties: my and at Represents a coordinate. My is based on the upper-left corner of the target point, at The lower right corner of the target point is the base.

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

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

AutoComplete Event Options

Event name	Description
Create	When automatic completion is created, the Create method is called, and the method has two Parameter (event, UI). The UI parameter in this event is empty.
Open	When automatic completion is displayed, the open method is called, and the method has two Parameter (event, UI). The UI parameter in this event is empty.
Close	When automatic completion is turned off, the Close method is called, and the method has two Parameter (event, UI). The UI parameter in this event is empty.
Focus	The focus method is called when automatic completion gets the focal point, which has two Parameters (event, UI). The UI in this event has a child Property object item, There are two attributes: label, complement full list display text; value, The value of the box that will be entered. Generic label and value values are the same.
Select	When automatic 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, There are two attributes: label, complement full list display text; value, The value of the box that will be entered. Generic label and value values are the same.
Change	When the auto complement loses focus and the content changes, the change is invoked method, which has two parameters (event, UI). The UI parameters in this event is empty.
Search	When the auto completion search is complete, the search method is called, and the method has Two parameters (event, UI). The UI parameter in this event is empty.
Response	When the auto completion search is complete, the menu is called before it is displayed. Response method, which has two parameters (event, UI). In this event The UI parameter has a child object content, and he returns the label and value Values that can be understood through traversal.

$ (' #email '). AutoComplete ({source: [' aaa@163.com ', ' bbb@163.com ', ' ccc@163.com '], Disabled:false, Minlen 
 
  Gth: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 ('); 
}, 
 
}); AutoComplete (' action ', param) method
  
  

   
   

     AutoComplete (' action ', param) method 
   
   
   
 
    
 
     
Method
 
     
return value
 
     
Description
 
    
 
    
 
     
AutoComplete (' Close ')
 
     
JQuery objects
 
     
Turn off auto-padded
 
    
 
    
 
     
AutoComplete (' Disable ')
 
     
JQuery objects
 
     
Disable Auto-padded
 
    
 
    
 
     
AutoComplete (' Enable ')
 
     
JQuery objects
 
     
Enable Auto-padded
 
    
 
    
 
     
AutoComplete (' Destroy ')
 
     
JQuery objects
 
     
Delete automatic completion, direct blocking
 
    
 
    
 
     
AutoComplete (' widget ')
 
     
JQuery objects
 
     
Get the jquery object for the ToolTip
 
    
 
    
 
     
AutoComplete (' Search ', value)
 
     
JQuery objects
 
     
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 objects
 
     
Set the value of the Options property
 
    
 
   
  
  
$ (' #reg '). On (' Autocompleteopen ', function () {alert (' triggered when open! 
 
'); });

e-Mail Automatic completion
dynamically set the data source by automatically supplementing the function callback function of the full source property to achieve
Realize the Full mailbox function.

1. Data source function
the source of the auto complement UI can be either an array or a function callback. Provides a self-brought
Two parameters to set a dynamic data source.

$ (' #email '). AutoComplete ({ 
 
  source:function (request, response) { 
 
   alert (request.term);    You can get the value you entered 
 
   response ([' AA ', ' aaaa ', ' aaaaaa ', ' BB ']);    Show full result 
 
  }, 
 
}); 

Note: The response here does not filter irrelevant results based on your search keywords, but displays the entire result.
To. Because source data sources, which are dynamically changing, are customized to discard the system's built-in search capabilities.

2. e-Mail Automatic completion

$ (' #email '). AutoComplete ({autofocus:true, delay:0, source:function (request, response) {var 
 
     hosts = [' qq.com ', ' 163.com ', ' 263.com ', ' gmail.com ', ' hotmail.com '],///Start term = request.term,//Get input value    IX = Term.indexof (' @ '),//@ name = term,//username host = ',//Domain name result = []; 
 
   Result//Result the first one is to input result.push (term);    if (ix >-1) {//If @ has the time name = Term.slice (0, ix);    Get username host = Term.slice (ix + 1);  
 
                 Get Domain name} if (name) {//Get found domain name var findedhosts = (Host $.grep (Hosts, function (value, index) { 
 
               return Value.indexof (Host) >-1; }): Hosts),//Final list of mailboxes findedresults = $.map (findedhosts, function (value, index) {return 
 
             name + ' @ ' + value; 
 
     }); 
 
   Add a self input result = Result.concat (findedresults); 
 
  } response (Result); 
 }, 
 
});