jquery實現輸入郵箱時自動補全下拉提示功能_javascript技巧

郵箱的廣泛使用得益于它的免費，因此很多網站在注冊的時候都會直接使用郵箱作為賬號名

為了提高用戶的體驗，很多網站都會實現郵箱輸入的自動提示功能。

實現效果如圖所示：

核心代碼（需要jquery的支持）：

html示例：

常用郵箱：

調用的jquery代碼：

css，這大家自己修改成自己想要的色調

效果二：

1、此插件為寬度自適應的，也就是當內部文字過長時，外部的div會寬度自動延伸的。在自定義CSS時如果設置了寬度值，則在非IE6瀏覽器下，寬度自適應失效；
2、無需在樣式中為最外部的box設置position屬性，或是寬度及高度，這些工作jQuery 插件已經幫你完成，設置了這些屬性反而不利于效果的展現；
3、此插件只能使用在單行文本框上，由于未對其他標簽類型的元素做限制，所以如果綁定對象不正確，可能會出現一些意想不到的情況.
4.歡迎在使用中提出各種問題和bug.
--------------------------------------------
注:使用方法
CSS代碼：

.out_box{border:1px solid #ccc; background:#fff; font:12px/20px Tahoma;}
.list_box{border-bottom:1px solid #eee; padding:0 5px; cursor:pointer;}
.focus_box{background:#f0f3f9;}
.mark_box{color:#c00;}

JS代碼：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com