根据文字搜索显示div [英] Show divs based on text search

问题描述

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

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:

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

我在做什么错了?

为了澄清变量txt，是用户在输入字段中键入的内容.例如，如果txt是Cha，我希望此行显示:

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:

<div class="contact-name"><h3><a href="##">Charles Smith</a></h3></div>

推荐答案

尝试一下

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

文档:contains()选择器

documentation for :contains() Selector

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

fiddle example : 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/

fiddle Example : http://jsfiddle.net/WBvTj/4/

这篇关于根据文字搜索显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！