是否有一种方法可以使用javascript/jquery来搜索一组li标签并缩小搜索范围
Is there a way to use javascript/jquery to search a group of li tags and narrow the search down
我一直在网上寻找如何做到这一点的想法。我有一个下钻菜单,在某些点上有六层深度(不是我的选择,这是客户想要的),我创建了一个xml文档,其中包含所有这些项目,用户可以在侧边菜单中选择总共106个不同的选项(这也是客户想要的)。我想创建一个搜索框,允许我输入其中一个选项的名称,列表将缩小,只显示用户输入的单词。
我的问题是否有一个插件允许这种行为?
如何在一组li元素中搜索文本?自己编写代码将相当简单,下面的jQuery从输入#inputString中获取一个字符串,并将遍历列表项"ul li",并根据它们是否与输入字符串匹配显示/隐藏。
如果需要,你可以修改"ul li"选择器来包含其他列表
jQuery("#inputString").keyup(function () {
var filter = jQuery(this).val();
jQuery("ul li").each(function () {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).hide();
} else {
jQuery(this).show()
}
});
});
我希望有很多插件做同样的事情,给它一个谷歌!
您可以尝试通过contains
选择器进行筛选:
var matches = $( 'ul#myMenu' ).find( 'li:contains(search string) ' );
$( 'li', 'ul#myMenu' ).not( matches ).slideUp();
matches.slideDown();
参见jsFiddle
如何在一组li元素中搜索文本?
var filteredLIS = $("li:contains('" + yourQuery + "')");
参考:http://api.jquery.com/contains-selector/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Start here: Search Service area via jQuery
window.filter = function(element)
{
var value = $(element).val().toUpperCase();
$(".left_message > li").each(function()
{
if ($(this).text().toUpperCase().search(value) > -1){
$(this).show();
}
else {
$(this).hide();
}
});
}
});
</script>
<input type="text" placeholder="Enter text to search" onkeyup="filter(this);">
<ul role="tablist" class="left_message">
<li><a href="#"><span>Anupk Kumar</span></a></li>
<li><a href="#"><span>Pradeep Kumar</span></a></li>
<li><a href="#"><span>Zahid Gani</span></a></li>
<li><a href="#"><span>Amitabh</span></a></li>
<li><a href="#"><span>Chandan Gupta</span></a></li>
</ul>
Result : Search Zahid , they return following output
<ul role="tablist" class="left_message">`enter code here`
<li><a href="#"><span>Zahid Gani</span></a></li>
</ul>
使用下面的示例:
http://www.designchemical.com/lab/jquery-drill-down-menu-plugin/getting-started/
这是我的建议:
$('#drilldown').find("a:contains('Product')");
您可以尝试使用这个概念:
$('.search').keyup(function(){
if( $(this).val().length > 0 ){
var foundin = $('#drilldown').find('li a:contains("'+$(this).val()+'")');
}
});
相关文章:
- fluxxor向一个flux实例添加一组以上的操作
- 我们怎样才能将内含子J用于一组特定的元素
- 使用linq.js按当前日期订购一组momentjs日期
- 正则表达式,从一组关键字中获取奇数
- 创建一组元素JointJS
- Javascript:使用用户输入搜索数组
- 如何在javascript中获取一组复选框值
- 一组(共组..)
- 使用JS将页面中的每个字母设置为随机颜色.为什么在页面的每个打开标记之前总是有一组额外的span标记
- javascript搜索数组,返回找到的关键字
- 在一组复选框中,一次只允许选择一个
- 为什么在fabricjs中可选择的不适用于一组圆
- 如何在不刷新页面的情况下每次单击一组选项卡时刷新视图内容窗格
- 从一组具有相同起始和结束的所有段落的段落中提取包含特定字符串的段落
- 简单的Javascript文本编辑器或一组函数
- 基于日期范围的一组日期范围内的天数
- 处理对象数组并将它们以 4 个为一组进行分配
- 如何在一个表的输入中搜索一组特定的值,而不是另一个表's id(s)值以添加css
- 将排序和搜索添加到html表中,其中返回一组行而不是列
- 是否有一种方法可以使用javascript/jquery来搜索一组li标签并缩小搜索范围