Using jQuery to find element attribute values

Question

I am trying to make a filter on the screen by simply hiding something that does not meet the requirements.

This is what I have come up with so far. I'm not sure what I'm doing wrong

JQuery:

jQuery('#searchBox').on('keyup change', function() { var search = $('#searchBox').val(); //for each h4 $('h4').each(function(){ var h4id = $(this).attr('id'); if ($(h4id).contains(search)) $(this).show(); else $(this).hide }); 

HTML:

 <input type="search" name="search" id="searchBox"/> <h4 id="Adminstrator">Administrator</h4> <h4 id="John,Smith">John Smith</h4> <h4 id="Jane,Smith">Jane Smith</h4> 

(I am using jQuery 1.9.1) (So, if I start typing Smith, the "Administrator" h4 should disappear.

Answer 1

.contains will not give you the text content of the selector. It will only search for elements inside the selector.

Try this approach. It can be much more optimized.

 jQuery('#searchBox').on('keyup change', function () { var search = $('#searchBox').val().toLowerCase(); $('h4').hide(); $('h4').each(function () { var h4id = $(this).attr('id'), $text = $('#'+ h4id).text().toLowerCase(); if($text.indexOf(search) > -1) $(this).show(); }); }); 

Make sure your identifier is unique.

Further, your identifier should not contain , in them

JSFIDDLE

Answer 2

Try the following: Simple but case sensitive though

Demo

  jQuery('#searchBox').on('keyup change', function() { var search = $('#searchBox').val(); $('h4').hide(); $('h4[id*='+ search + ']').show(); }); 

Strike>

See if that helps. I will not use id to store string comparisons, as the name may be the same for multiple users, and you may end up with multiple h4 with the same identifier. SO I use attribute data and jquery data here.

Demo

  jQuery('#searchBox').on('keyup change', function() { var search = $('#searchBox').val(); $('h4').hide().filter(function(_,oj){ return $(oj).data('key').toLowerCase().indexOf(search.toLowerCase()) > -1; //if your are trying to match the text() then do //return $(oj).text().toLowerCase().indexOf(search.toLowerCase()) > -1; }).show(); }); 

Committing code will mean that. There is no contains function and pairs of other typos.

Demo

 jQuery('#searchBox').on('keyup change', function() { var search = $('#searchBox').val(); //for each h4 $('h4').each(function(){ var h4id = this.id; if (h4id.indexOf(search) > -1) //if your are trying to match the text() then do //if ($('#'+h4id).text().indexOf(search) > -1) $(this).show(); else $(this).hide(); }); }); 

Answer 3

Try a regex solution

 jQuery('#searchBox').on('keyup change', function() { var search = $(this).val(); var regex = new RegExp(search, 'i'); //for each h4 $('h4').hide().filter(function(){ return regex.test(this.id) }).show(); }); 

Demo: Fiddle

Answer 4

Just using the jQuery attribute selector, see here , just two lines of code are enough. Demo video:

 //for each h4 var h4id = $(this).attr('id'); $("h4").hide().filter("[id*=" + h4id + "]").show();