javascript 有没有办法使用javascript/jquery来搜索一组li标签并缩小搜索范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15813912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to use javascript/jquery to search a group of li tags and narrow the search down
提问by Robert
I have been looking all over the web for ideas on how to do this. I have a DrillDown menuthat at some points goes six levels deep (not my choice this is what the customer wants) I have created an xml document that holds all of these items there are a total of 106 different options that a user can select just in the side menu alone (again its what the customer wants). I want to create a search box that would allow me to type in the name of one of the selections and the list would shrink to only show the options with the word(s) that the user inputs.
我一直在网上寻找有关如何做到这一点的想法。我有一个DrillDown 菜单，在某些时候它有六层深（不是我的选择，这是客户想要的）我创建了一个包含所有这些项目的 xml 文档，用户可以选择总共 106 个不同的选项仅在侧面菜单中（再次是客户想要的）。我想创建一个搜索框，允许我输入其中一个选项的名称，列表将缩小以仅显示包含用户输入的单词的选项。
My question Is there a plugin that would allow this behavior?
我的问题是否有允许这种行为的插件？
If not How do you search a group of li elements for text?
如果不是如何在一组 li 元素中搜索文本？
回答by DaveB
To code it yourself would be fairly straightforward, the jQuery below takes a string from the input #inputString and will iterate through the list items "ul li" and show/hide depending if they match the input string.
自己编写代码会相当简单，下面的 jQuery 从输入 #inputString 中获取一个字符串，并将遍历列表项“ul li”并根据它们是否与输入字符串匹配来显示/隐藏。
You can modify the "ul li" selector to contain other lists if needed
如果需要，您可以修改“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()
}
});
});
I expect there are many plugins that do the same thing, give it a google!
我希望有很多插件可以做同样的事情，给它一个谷歌！
回答by antyrat
回答by Adriano Carneiro
How do you search a group of li elements for text?
如何在一组 li 元素中搜索文本？
var filteredLIS = $("li:contains('" + yourQuery + "')");
Reference: http://api.jquery.com/contains-selector/
回答by Draykos
Using the drilldown sample here:
在此处使用钻取示例：
http://www.designchemical.com/lab/jquery-drill-down-menu-plugin/getting-started/
This is my suggestion:
这是我的建议：
$('#drilldown').find("a:contains('Product')");
回答by Alex
You can try using this concept:
你可以尝试使用这个概念：
$('.search').keyup(function(){
if( $(this).val().length > 0 ){
var foundin = $('#drilldown').find('li a:contains("'+$(this).val()+'")');
}
});
回答by Zahid Gani
<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>
