jQuery UI implements email input prompt example_jquery

Effect:

Copy code The code is as follows:

Using Jquery UI , js and css to be imported:



< script src="../../ui/jquery.ui.core.js">




<script> <br>var emails=["163.com","yahoo.com ","yahoo.cn","126.com","sina.com"]; <br>$( function () { <br>//Bind events for the input box<br>$( "#email" ).keyup( function(){ <br>emailInp(); <br>}); <br>}); <br>function emailiInp(){ <br>var arrs= new Array() <br>inpVal= $( "#email" ).val(); <br>//Dynamicly create a drop-down list based on the entered value <br>$.each(emails, function (index,info){ <br>if (inpVal. indexOf("@" )==-1) <br>{ <br>//No input @ <br>arrs[index]=inpVal "@" info; <br>} else { <br>//Input @ <br>arrs[index]=inpVal.substring(0,inpVal.indexOf( "@" )) "@" info; <br>} <br>}) <br>$( "#email" ).autocomplete( { <br>//Bind drop-down list content<br>source: arrs <br>}); <br>} <br></script>
Finally, a text box: