用jquery简单实现前端页面搜索并返回想要的数据

最新推荐文章于 2023-06-14 20:17:29 发布

Mr mower

最新推荐文章于 2023-06-14 20:17:29 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript 文章标签： JQuery 前端页面搜索 html 搜索

本文链接：https://blog.csdn.net/qq_39204810/article/details/102638730

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

因为项目需要在多个列表中搜索目标数据，一开始有点犯难为，没想到用jquery几句话就能实现了。

html 代码

<body>
		<input type="text" value=""><button>搜索</button>
		<ul id="test">
			<li class="test1">John mower
				<ul>
					<li class="test1">mower clement</li>
					<li>clement Tung</li>
					<li>Tung XX</li>
					<li>King Harry</li>
				</ul>
			</li>
			<li class="test2">Harry</li>
			<li class="test3">Mover</li>
		</ul>
</body>

运行后这样的，
在这里插入图片描述
当然了，有一些小技巧呀，例如我们想打开的页面时候就把ul下的li元素合并，并不想在页面全展示，可以添加一行JQ代码，

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$("#test >li >ul").hide();
			$("input").val("111");
		})
	</script>

还是提一句（“>li”）这个>的作用吧，就是只在子节点中寻找节点，不去孙子及其他后代节点。这样的话，就会把不想展示的信息收起来，页面也不显得臃肿。在这里我把“John mower” 下面的ul给隐藏起来了，因为项目需要啊，有上千条li元素数据不可能一下子都展开，太难看了。
收起后的效果
好了，回到正题。继续我们的搜索

$("button").click(function(){
		$("#test >li >ul").show();  //要把所有li数据全展开，才能进行搜索
		var value = $("input").val();//获得搜索值
		//这里主要逻辑就是contains(),not(),hide()这三个函数
		//contains()找到带有目标内容的节点 我会在下面展示结果
		//not()的话，就是找到这些节点后排除它，找到不带有目标内容的节点，为了后面的hide()，好了这样就只剩下我们想要搜索的节点了。
		$("li").not("li:contains('"+value+"')").hide("fast");
		
	})

其实就这么几句话，当我们搜索mower的时候，结果如下：
运行结果
显然其他都被隐藏了，contains（）的输出也打印下吧
在这里插入图片描述
大家可以试试，自己想要的效果稍微调整下就能得到了，还有各种操作就不一一说了，这里只是单纯的为了实现小功能。

最近在做搜索相关的项目，过一阶段打算写篇lucene，关于项目搭建，分词器，常用操作中遇见的坑。

Mr mower

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
用jquery简单实现前端页面搜索并返回想要的数据

因为项目需要在多个列表中搜索目标数据，一开始有点犯难为，没想到用jquery几句话就能实现了。html 代码<body> <input type="text" value=""><button>搜索</button> <ul id="test"> <li class="test1">John mower ...
复制链接

扫一扫