投稿    登录
  博主录制的Python3爬虫视频教程已发布!详情请戳Python3爬虫视频教程!希望大家支持!非常感谢!

jQuery应用二之邮箱下拉列表自动补全

JavaScript 崔庆才 3161浏览 0评论

综述

我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能。现在我们就用jQuery来实现一下。

博主原创代码,如有代码写的不完善的地方还望大家多多指教。

功能简述

  • 填写邮箱名字,出现下拉列表,自动补全邮箱
  • 点击上下按键,选取下拉列表邮箱
  • 按回车键,选中列表内容,隐藏下拉列表
  • 鼠标经过,下拉列表选项设置为高亮
  • 鼠标点击,选中下拉列表选项,隐藏下拉列表

在线演示

在此直接插入一个iframe进行演示

链接为
在线演示

HTML

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

以上便是HTML代码

CSS

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

CSS所有样式如下

以上便是CSS代码

JS

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

以上便是 jQuery 代码

源码下载

源码下载

总结

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

大家也可以尝试下,希望小伙伴们有帮助,加油!

转载请注明:静觅 » jQuery应用二之邮箱下拉列表自动补全

喜欢 (10)or分享 (0)

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的

想结交更多的朋友吗?

来进击的Coder瞧瞧吧

进击的Coder

QQ群号 99350970 立即加入

进击的Coder灌水太多?

这里是纯粹的技术领地

激进的Coder

QQ群号 627725766 立即加入

想找人聊天解闷?想要学习干货?

微信公众号进击的Coder为你打造

进击的Coder

微信公众号 扫一扫关注