jQuery实现邮箱下拉列表自动补全功能(jquery验证邮箱格式)

推荐整理分享jQuery实现邮箱下拉列表自动补全功能(jquery验证邮箱格式)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery邮件删除效果,jquery制作邮件删除效果,java邮件html模板,jquery验证邮箱格式,java邮件html模板,jquery制作邮件删除效果,jquery制作邮件删除效果,jquery邮箱正则表达式,内容如对您有帮助，希望把文章链接给更多的朋友！

记得，在上个项目中，遇到这样一个需求，网站要求填写邮箱的时候，还没有填写完，就会出现一系列下拉列表，帮助自动补全邮箱的功能。今天小编给给大家分享下我基于jquery是怎么实现此功能的！

功能简述

&#;填写邮箱名字，出现下拉列表，自动补全邮箱

&#;点击上下按键，选取下拉列表邮箱

&#;按回车键，选中列表内容，隐藏下拉列表

&#;鼠标经过，下拉列表选项设置为高亮

&#;鼠标点击，选中下拉列表选项，隐藏下拉列表

HTML

HTML代码很简单，我们就一个简单的输入框，然后一个ul标签，在内部可以放好多li标签。

以上便是HTML代码

CSS

在CSS中，定义也比较简单，其中有一个 lilight 的 class，可以使背景变色，通过 remove 和 add 这个 class，我们可以轻松地实现下拉列表元素是否选中的区分。

CSS所有样式如下

JS

我们引入 jQuery 来实现对元素的操作，实现了按键和鼠标监听，代码如下

总结

其实还有一个比较强大的插件，叫autocomplete，同样可以实现下拉列表的自动补全，功能更加完善，如果大家有兴趣可以去试一下。不过感觉最常用的就是邮箱自动补齐，而且直接用 jQuery 就可以比较方便地实现，所以博主就没有使用autocomplete插件，而是自己写了一下，一来练习一下，二来对这种功能的实现了解得更加透彻。

以上所述是小编给大家介绍的jQuery实现邮箱下拉列表自动补全功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！

jQuery简单创建节点的方法 本文实例讲述了jQuery简单创建节点的方法。分享给大家供大家参考，具体如下：htmlheadmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/title/titlescripttype="t

jQuery查找节点并获取节点属性的方法 本文实例讲述了jQuery查找节点并获取节点属性的方法。分享给大家供大家参考，具体如下：htmlheadmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/title/tit

jQuery内容过滤选择器用法示例 本文实例讲述了jQuery内容过滤选择器用法。分享给大家供大家参考，具体如下：htmlheadmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/title/titlescriptsrc="js