JS輸入使用者名稱自動顯示信箱後綴清單的方法_javascript技巧

本文實例講述了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程式設計有所幫助。