jQuery 根据文本搜索显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9510064/
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
Show divs based on text search
提问by Josh Scott
I have a text input search that is supposed to filter divs based on the title of the div. Here is the code that is not working:
我有一个文本输入搜索，它应该根据 div 的标题过滤 div。这是不起作用的代码：
$('.contact-name').each(function(){
var txt = $('#search-criteria').val();
$('this').find(txt).show()
});
What am I doing wrong?
我究竟做错了什么？
EDIT: To clarify the variable txt is what the user has typed in the input field. An example would be if txt was Cha I would want this row to show:
编辑：澄清变量 txt 是用户在输入字段中输入的内容。一个例子是如果 txt 是 Cha 我希望这一行显示：
<div class="contact-name"><h3><a href="##">Charles Smith</a></h3></div>
回答by dku.rajkumar
try this
尝试这个
var txt = $('#search-criteria').val();
$('.contact-name:contains("'+txt+'")').show();
documentation for :contains() Selector
fiddle example : http://jsfiddle.net/WBvTj/2/
小提琴示例：http: //jsfiddle.net/WBvTj/2/
UPDATE CASE INSENSITIVE:
更新案例不敏感：
var txt = $('#search-criteria').val();
$('.contact-name').each(function(){
if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
$(this).show();
}
});
fiddle Example : http://jsfiddle.net/WBvTj/4/
小提琴示例：http: //jsfiddle.net/WBvTj/4/
回答by Patches
The following should be case-insensitive, and match only on text in first a href in the div:
以下内容应不区分大小写，并且仅匹配 div 中第一个 href 中的文本：
var pattern = "/" + $('#search-criteria').val() + "/i";
$('.contact-name').filter(function() {
return $(this 'a:first-child').html().match(pattern).length > 0;
}).show();
filter gives you a list of elements that return true from that function in it to apply show() to.
The return in the filter function can be read as: "for the first anchor element in this element, take the contents, match it against the pattern, and if the resulting array contains 1 or more results, return true".
filter 为您提供一个元素列表，这些元素从其中的函数返回 true 以将 show() 应用于。
过滤器函数中的返回可以读作：“对于该元素中的第一个锚元素，取内容，将其与模式匹配，如果结果数组包含 1 个或多个结果，则返回 true”。
The "i" on the end of the pattern is what gets you case-insensitive matching.
模式末尾的“i”是让您不区分大小写的匹配。
回答by Ryan
回答by Diego
The findmethod takes a JQuery selector as parameter. I doubt your search_criteriatext input will contain that. Assuming it will contain some substring of the DIV's title, then try this:
该find方法采用 JQuery 选择器作为参数。我怀疑您的search_criteria文本输入会包含该内容。假设它将包含 DIV 标题的一些子字符串，然后试试这个：
var txt = $('#search-criteria').val();
$('.contact-name').each(function(i, e){
if($(e).attr("title").indexOf(txt)>=0) $(e).show();
});
