我一直在网上寻找有关如何做到这一点的想法。我有一个DrillDown 菜单,在某些时候有六级深度(不是我的选择,这是客户想要的)我创建了一个包含所有这些项目的 xml 文档,用户可以选择总共 106 个不同的选项仅在侧面菜单中(再次是客户想要的)。我想创建一个搜索框,允许我输入其中一个选项的名称,并且列表将缩小为仅显示带有用户输入的单词的选项。
我的问题是否有允许这种行为的插件?
如果不是,你如何在一组 li 元素中搜索文本?
我一直在网上寻找有关如何做到这一点的想法。我有一个DrillDown 菜单,在某些时候有六级深度(不是我的选择,这是客户想要的)我创建了一个包含所有这些项目的 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 + "')");
<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()+'")');
}
});