jQuery做的搜索提示框
2018-01-24 11:59
344 查看
效果图:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="txtId" type="text"><br/> <ul> <li id="box1">张三疯</li> <li id="box3" class="boxClass">张千锋</li> <li id="box2">王麻子</li> <li id="box4" class="boxClass">张文浩</li> <li id="box5" class="boxClass">王帆</li> <li id="box6" class="boxClass">王雨</li> </ul> </body> </html> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function () { $("#txtId").keyup(function () { $("li").css({"display":"none"}); $("li:contains("+this.value+")").css({"display":"block"}); }); }); </script>
相关文章推荐
- jQuery做的搜索提示框
- bootstrap-datepicker时间插件和chosen.jquery下拉模糊搜索和bootbox.min弹出框以及jquery.tips提示框和js的全选与取消的使用
- 仿Google搜索自动提示 jQuery+Ajax
- JQuery+JS实现仿百度搜索结果中关键字变色效果
- jquery实现带搜索的下拉框
- jquery 表格排序、实时搜索表格内容(附图)
- 利用jQuery实现可输入搜索文字的下拉框
- input 点击放大镜背景搜索、jQuery实现简单前端搜索功能
- 利用jquery的jsonp实现的必应搜索
- jQuery商品搜索筛选导航菜单
- jQuery实现鼠标移上弹出提示框,移出消失
- jquery分页插件(简洁、兼容、类似浏览器搜索分页效果)
- [转载] 14 款基于 jQuery 的实时搜索插件推荐
- 使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)
- 模拟jquery封装简单的Select搜索
- jQuery实现列表搜索(筛选)效果
- Jquery完成CTRL+F的页面搜索功能
- jquery.chosen.js实现模糊搜索
- 类似于百度搜索,搜索关键字,下拉框显示,以及jQuery中添加删除class类,并给class类添加样式
- jquery右下角弹出提示框