首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置:首页正文

jquery实现输入邮箱时自动补全下拉提示功能_javascript技巧

2020-11-27 来源:华佗小知识

记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅。

邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名

为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能。

实现效果如图所示:

核心代码(需要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代码:





 




        
显示全文