JQuery根据关键字检索html元素并筛选显示
背景:标题比较唬人,实际上就是在文本框中输入关键字,通过关键字检索html元素,筛选后显示在界面上。
Html元素如下:
1 <div> 2 <input type="text" id="searchBox"/> 3 <ul id="dataSet"> 4 <li>刘德华</li> 5 <li>黄日华</li> 6 <li>张学友</li> 7 <li>谢霆锋</li> 8 <li>陈奕迅</li> 9 <li>陈冠希</li> 10 <li>郑伊健</li> 11 <li>郭富城</li> 12 <li>黄秋生</li> 13 <li>杜琪峰</li> 14 <li>梁朝伟</li> 15 </ul> 16 </div>
1 $(function () { 2 $("#searchBox").keyup(function () { 3 var value = $(this).val(); 4 $("#dataSet li").each(function () { 5 $(this).hide(); 6 if ($(this).text().indexOf($.trim(value)) >= 0) { 7 $(this).show(); 8 } 9 }); 10 }); 11 });
运行后的效果如图:
转载于:https://www.cnblogs.com/remote/p/11065284.html
JQuery根据关键字检索html元素并筛选显示相关推荐
- 【Jquery】-------JS实现关键字检索html内容,符合关键字的匹配项,进行标注背景色,可进行上一个,下一个切换定位
JS实现关键字检索html内容,符合关键字的匹配项,进行标注背景色 核心代码 全部代码 展示效果 核心代码 全部代码 这个代码主要功能: 通过关键字检索出html内容匹配项 可进行上一个,下一个切换定 ...
- jq 如何获取和当然元素相同类名的标签_jquery获取兄弟元素-jquery获取下一个兄弟元素-jquery获取最后一个兄弟元素...
jquery怎幺获取当前元素的兄弟元素 可以使用 siblings() jquery既然有next方法取得下一个元素,那幺有previous方法吗 $("#id").prev(); ...
- fond+html属性,JQuery 干货篇之选择元素
JQuery 干货篇之选择元素 实验的HTML+CSS的代码 html Example Jacqui's Flower Shop Astor: Daffodil: Rose: Peony: Primu ...
- jQuery是否可以获取与元素关联的所有CSS样式?
本文翻译自:Can jQuery get all CSS styles associated with an element? Is there a way in jQuery to get all ...
- jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
- jQuery常用的查找Dom元素方法
jQuery常用的查找Dom元素方法 废话不多说,先来个总结,然后下面是demo 一. 同级节点之间的检索(检索深度N=0) next()是在兄弟节点中,往后匹配; prev()是在兄弟节点中,往前匹 ...
- jquery 所有contenteditable=true的元素_JavaScript学习笔记(三十一) jQuery(上)
jQuery jQuery 是一个前端库,也是一个方法库 他里面封装着一些列的方法供我们使用 我们常用的一些方法它里面都有,我们可以直接拿来使用就行了 jQuery 之所以好用,很多人愿意使用,是因为 ...
- 【ios开发/Xcode】实现关键字检索
[ios开发/Xcode]实现关键字检索 实现效果 源代码 实现效果 源代码 注:@开头的这些代码都是需要关联控键,都需要自行在故事板中(Storyboards)进行关联 import UIKitcl ...
- jQuery HTML 添加和删除元素
jQuery - 添加元素 通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() ...
最新文章
- jsp mysql utf8_jsp操作mysql存取中文乱码
- Apache Dubbo 3.0.0 正式发布 - 全面拥抱云原生
- .adobe.ETH.btc.frendi.AUF.AYE.qwex后缀勒索病毒
- 手机版wps怎么制作折线图_手机怎么制作电子签名?有没有手机电子签名软件或者APP?...
- 各大公司(Google,Microsoft,Baidu, Microsoft Research Asia etc.)实习生面试题总汇
- python在d盘增加环境变量配置_怎样配置Python环境变量
- Eclipse安装SVN
- OAuth2.0认证流程原理
- 互联网+创新创业大赛项目计划书,个人原创你学会了吗?
- Kali扫描 vega的使用
- matlab 删除一个文件,【MATLAB】Matlab删除文件或者文件
- ROMS模式RNT工具包的应用(弃用)
- 如何启用计算机的无线功能键在哪,笔记本无线网络开关,小编教你如何打开笔记本电脑无线网卡开关...
- Mybatis官方网站
- JS实现下落的树叶特效
- android简单实现表格布局,Android开发中TableLayout表格布局
- PostgreSQL时间加减
- 周杰伦新歌《Mojito》歌词
- VMware Workstation 9 + Mac OS X 10.8
- 计算机研究生复试英语自我介绍,计算机研究生复试专业英语自我介绍.doc
热门文章
- java怎么实现两个对象内容的交换
- a king读后感 love of the_A华语电影高清合集
- 揭开git的神秘面纱
- 我的docker随笔10:docker客户端使用其它主机的docker服务器
- Servlet的生命周期和工作原理
- 【Spark】一条 SQL 在 Apache Spark 之旅(上)
- 【Flink】Flink Checkpoint 问题排查实用指南
- 【Elasticsearch】 Kibana 里程碑插件的使用
- 【Elasticsearch】如何使用 Elasticsearch 6.2 搜索中文、日语和韩语文本 - 第 3 部分:语言检测工具
- 95-30-050-java.util.ArrayList:Vector