jQuery UI 實作email輸入提示實例_jquery

效果：
 

複製程式碼 程式碼如下:

UI

,要導入的js和css:








<script> <br>var emails=["163.com","yahoo.com","yahoo.cn","126.com","sina.com"] ; <BR>$( function () { <BR>//為輸入框綁定事件<BR>$( "#email" ).keyup( function(){ <BR>emailiInp(); <BR>}) ; <BR>}); <BR>function emailiInp(){ <BR>var arrs= new Array() <BR>inpVal=$( "#email" ).val(); <BR>//根據輸入的值，動態的建立下拉清單<BR>$.each(emails, function (index,info){ <BR>if (inpVal.indexOf("@" )==-1) <BR>{ <BR>//沒有輸入@ <BR>arrs[index]=inpVal "@" info; <BR>} else { <BR>//輸入@ <BR>arrs[index]=inpVal.substring(0,inpVal.indexOf( "@ " )) "@" info; <BR>} <BR>}) <BR>$( "#email" ).autocomplete({ <BR>//綁定下拉清單內容<BR>source: arrs <BR> }); <BR>} <BR></script>
最後再來個文字方塊：