jQuery contains - case insensitive

by secretgspot

HTML

<input id="srch" value=""/ >             
<div class="listicon">         
  <a href="#"> 
    <img src="images/icon/food.png" class="iconimage">
    <span>Hotels</span>
  </a>
</div>  
<div class="listicon">            
  <a href="#"> 
    <img src="images/icon/Internet.png" class="iconimage">
    <span>Parks</span>
  </a>
</div>                 
<div class="listicon">            
  <a href="#"> 
    <img src="images/icon/leisure.png" class="iconimage">
    <span>Gym</span>
  </a>
</div>              
<div class="listicon">            
  <a href="#"> 
    <img src="images/icon/Public office.png" class="iconimage">
    <span>Grocery</span>
  </a>
</div>     
<div class="listicon">            
  <a href="#"> 
    <img src="images/icon/Religion.png" class="iconimage">
    <span>Electronics</span>
  </a>
</div>             
<div class="listicon">           
  <a href="#"> 
    <img src="images/icon/Services.png" class="iconimage">
    <span>Housesupplies</span>
  </a>
</div>                   
<div class="listicon">             
  <a href="#"> 
    <img src="images/icon/Shopping.png" class="iconimage">
    <span>PetSupplies</span>
  </a> 
</div>
<div id="noMatch" style="display:none">No match</div>

CSS

a { text-decoration:none}

JavaScript

jQuery.expr[':'].Contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; // ==0 for exact match
};

$("#srch").bind("keyup",function() { 
  var val = $("#srch").val();
  $(".listicon span:Contains('"+val+"')").parent().show();
  $(".listicon span:not(:Contains('"+val+"'))").parent().hide();
  var spans = $(".listicon span:visible");
  if (spans.length==0) $("#noMatch").show();
  else $("#noMatch").hide();
});