jquery UI Mailbox Auto-Complete

"1"

Auto-completion (AutoComplete) is a UI tool that reduces the user's ability to enter complete information. Usually enter the mailbox, search keywords and so on, and then extract the corresponding full string for the user to choose.

<script type= "Text/javascript" > $ ("#email"). AutoComplete ({delay:0,//default is 300 milliseconds, delay display setting.        Autofocus:true,//set to True, the first item is automatically selected.        Request is an object that has an attribute term, which represents the content entered by the user. The response function is used to bind the data source for example: Response (["AA", "AAAA", "aaaaaa", "BB"]) source:function (request, response) {V AR hosts = ["Qq.com", "163.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//mailbox domain name collection var term = requ Est.term;  Gets the content entered by the user; var name = term;   User name of the mailbox var host = ""; The domain name of the mailbox such as qq.com var IX = term.indexof (' @ '); The position of @ var result = []; The final rendered list of mailboxes//When the user enters the data (email) where @ is present, re-assigns the username and the domain name if (ix >-1) {//If the @ symbol exists, it means that the user has entered                The name of the user.                Name = Term.slice (0, ix);            Host = Term.slice (ix + 1); If name (name) {/////= NOT NULL///If the user has entered all or part of the domain name @ and later, then find the relevant domain name hint, such as [email protected] prompt [   Email protected]             If the user has not entered an @ or a later domain name. Then all the domain names are prompted out var gethosts = []; Domain name based on username we found the corresponding domain name set in the hosts (host) {///and host also has value when gethosts = $.grep (Hosts, func  tion (val, key) {//Assign value to Gethosts if (Val.indexof (Host) >-1) {return                        Val                    };                });                } else {gethosts = hosts;                    } var abc = $.map (gethosts, function (val) {//This val is the element of each domain name in gethosts.                Return name + "@" + val;                                }); Result.push (term);//If I only define qq.com, and 163.com These two mailbox lists, then I also have the function of prompting when the user enters other mailbox, for example when I enter [email protected], I also have the hint function. At this point, I need to add the user input data to the result of this mailbox domain name collection, result = Result.concat (ABC);//And then add the ABC set into result to form a new array and assign the value to ResU LT}//result.push (term); Or that's OK, but in this case, the term is in the arrayThe position inside is the last one. The tip is the last one. We generally want it to show up in the first//result.unshift (term); or that's OK;        The function of the Unshift method is to add one or more new elements to the beginning of the array, and the elements in the array automatically move back, returning the new length of the array response (result); }});</script>

Now we can carefully optimize the above JS code



  
jquery UI Mailbox Auto-Complete