因为项目需要在多个列表中搜索目标数据,一开始有点犯难为,没想到用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,关于项目搭建,分词器,常用操作中遇见的坑。