根据文本搜索显示div

我有一个文本输入搜索，应该根据div的标题过滤div。 这是不起作用的代码：

$('.contact-name').each(function(){ var txt = $('#search-criteria').val(); $('this').find(txt).show() }); 

我究竟做错了什么？

编辑：澄清变量txt是用户在输入字段中输入的内容。 一个例子是如果txt是Cha我想要这行显示：

 
Charles Smith 

Answer 1

试试这个

 var txt = $('#search-criteria').val(); $('.contact-name:contains("'+txt+'")').show(); 

文档：contains（）选择器

小提琴示例： http ： //jsfiddle.net/WBvTj/2/

更新案例不敏感：

 var txt = $('#search-criteria').val(); $('.contact-name').each(function(){ if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){ $(this).show(); } }); 

小提琴示例： http ： //jsfiddle.net/WBvTj/4/

Answer 2

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(); }); 

Answer 3

幸运的是jQuery有一个Contains选择器：

 $('.contact-name').each(function(){ var txt = $('#search-criteria').val(); $(this).find('div:contains("'+txt+'")').show() }); 

Answer 4

以下应该不区分大小写，并且仅匹配div中第一个href中的文本：

 var pattern = "/" + $('#search-criteria').val() + "/i"; $('.contact-name').filter(function() { return $(this 'a:first-child').html().match(pattern).length > 0; }).show(); 

filter为您提供了一个元素列表，该元素从该函数返回true以应用show（）。
filter函数中的返回值可以读作：“对于此元素中的第一个锚元素，获取内容，将其与模式匹配，如果结果数组包含1个或多个结果，则返回true”。

模式结尾处的“i”是让您不区分大小写的匹配。