Effect:
Copy Code code as follows:
Using the jquery UI, JS and CSS to import:
<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 for an input box
$ ("#email"). KeyUp (function () {
EMAILIINP ();
});
});
function Emailiinp () {
var arrs= new Array ()
inpval=$ ("#email"). Val ();
Creates a Drop-down list dynamically based on the value you enter
$.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 dropdown list content
Source:arrs
});
}
</script>
And finally a text box:
<input id= "Email"/>
