JQuery UI implements email input prompt instance

Effect:
 
Copy codeThe Code is as follows:
When Jquery UI is used, the js and css to be imported are as follows:
<Link rel = "stylesheet" href = ".../../themes/base/jquery.ui.all.css">
<Link rel = "stylesheet" href = ".../demos.css">
<Script src = ".../jquery-1.7.2.js"> </script>
<Script src = ".../../ui/jquery. ui. core. js"> </script>
<Script src = ".../../ui/jquery. ui. widget. js"> </script>
<Script src = ".../../ui/jquery. ui. position. js"> </script>
<Script src = ".../../ui/jquery. ui. autocomplete. js"> </script>

<Script>
Var emails = ["163.com"," yahoo.com "," yahoo.cn "," 126.com", "sina.com"];
$ (Function (){
// Bind an event to the input box
$ ("# Email"). keyup (function (){
Emailiindium ();
});
});
Function emailiindium (){
Var arrs = new Array ()
InpVal = $ ("# email"). val ();
// Dynamically create a drop-down list based on the input value
$. Each (emails, function (index, info ){
If (inpVal. indexOf ("@") =-1)
{
// No input @
Arrs [index] = inpVal + "@" + info;
} Else {
// Enter @
Arrs [index] = inpVal. substring (0, inpVal. indexOf ("@") + "@" + info;
}
})
$ ("# Email"). autocomplete ({
// Bind the drop-down list content
Source: arrs
});
}
</Script>
Next text box:
<Input id = "email"/>