Show divs based on text search

Question

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

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:

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

dku.rajkumar · Accepted Answer · 2012-03-01T04:52:35.307

63

try this

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

documentation for :contains() Selector

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

edited Mar 01 '12 at 04:52

answered Mar 01 '12 at 03:16

dku.rajkumar

18,414
7
41
58

See the my additional explanation above. I am look to the evaluate the text inside the div. – Josh Scott Mar 01 '12 at 03:19
That is working mostly, is there a way to make that case insensitive? – Josh Scott Mar 01 '12 at 03:43
And to not search hidden rows. – Josh Scott Mar 01 '12 at 03:43
updated the code for case insensitive... what do you mean by hidden field ??? is it a input hidden type or div with visibility hidden ??? – dku.rajkumar Mar 01 '12 at 04:53
Thanks i have used this , [Here](http://stackoverflow.com/a/16987520/2218697) is similar, for **more example and effects** , just google `jquery live text search` hope helps someone. – Shaiju T Nov 16 '16 at 16:30

score 1 · Answer 2 · answered Mar 01 '12 at 04:01

The following should be case-insensitive, and match only on text in first a href in the div:

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".

The "i" on the end of the pattern is what gets you case-insensitive matching.

CodeOverload · Answer 3 · 2012-03-01T03:16:44.327

0

Luckily jQuery has a Contains selector:

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

edited Mar 01 '12 at 03:16

answered Mar 01 '12 at 03:09

CodeOverload

47,274
54
131
219

score 0 · Answer 4 · answered Mar 01 '12 at 03:10

The find method takes a JQuery selector as parameter. I doubt your search_criteria text input will contain that. Assuming it will contain some substring of the DIV's title, then try this:

var txt = $('#search-criteria').val();    
$('.contact-name').each(function(i, e){
  if($(e).attr("title").indexOf(txt)>=0) $(e).show();
});

Show divs based on text search

4 Answers4

Linked