本文實例講述了JS輸入使用者名稱自動顯示郵箱後綴清單的方法。分享給大家供大家參考。具體如下：
以下是程式碼，儲存到html檔案開啟：
原理是：一個輸入框當我輸入任何字的時候自動下拉對應的郵箱提示，在輸入框輸入11的時候下拉框有所有11的郵箱輸入其他的時候有其他文案對應的郵箱。
同理 此插件不需要任何html標籤，只需要一個輸入框 有相對應的class類別名稱就ok 且父級有個class類名，其他的都不需要。內部的HTML程式碼都是自動產生的。
HTML程式碼如下：
其實上面的div標籤都可以不需要只需要在input輸入框且父級元素添加一個如上class(自訂也可以，只是在JS初始化的時候要傳入class就ok 我預設情況下父級class叫parentCls,目前輸入框class叫inputElem,隱藏域的class叫hiddenCls，在初始化的時候直接初始化傳入空物件即可！因為頁面上可能有多個輸入框 所以需要一個父級class 來區分是那個輸入框，當然要個隱藏域 存值給開發後台。
其中在設定項裡面有個郵件匣陣列參數mailArr : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com" ,"@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"] 。就是要告訴我們預設郵箱有這麼多，不管我輸入什麼 下拉框初始化時候有這麼多郵箱提示，當我精確到某一項的時候 在給個提示 精確到某一項下拉。當然由於需求的變更 郵箱這個參數可以自己初始化時候 自己根據需求配置。
實現的功能如下：
1. 支援鍵盤上下移鍵盤操作，支援滑鼠點擊及按回車操作。
2. 點選document時候 除目前input輸入框之外 下拉框隱藏。當接著輸入時候 實現自動匹配等等操作。
具體不多說 就是類似網路報名時候 信箱自動提示功能一樣 ，如果有任何bug的話 可以給我留言，就不囉嗦了！
CSS程式碼如下：
emailAutoComplete.js程式碼點擊此處本站下載。
希望本文所述對大家的javascript程式設計有所幫助。
