Ricerca / filtro real-time in jQuery

ricerca_jquery.html

<h2 align="center">Ricerca real-time in jQuery</h2>
<br/>
<div class="row ">
    <div class="panel-group">
    
        <input type="text" id="filtro" class="form-control" placeholder="Cerca qualcosa, ad esempio 'spaghetti'" />
        <br/>
        
        <div class="contenuto">
            A Milano ci sono degli ottimi ristoranti!
        </div>
        <div class="contenuto">
            Nelle aree turistiche marittime ci sono spesso pessimi ristoranti, salvo eccezioni!
        </div>
        <div class="contenuto">
            In montagna è difficile mangiare a perdifiato: c'è poco ossigeno!
        </div>
        <div class="contenuto">
            Martedì ho mangiato spaghetti.
        </div>

    </div>
    <!--/panel-group-->
</div>


<script>
//Questa dicitura serve a SOVRASCRIVERE la funzione :contains usata da jQuery (e visibile nella funzione poco sotto) affinché sia case-insensitive
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

$(document).ready(function(){
 $("#filtro").bind('keyup',function(){
   $(".contenuto").each(function(){
     if($("#filtro").val().length >= 2 ){
         if( $(this).is(":contains('"+ $("#filtro").val().toLowerCase() + "')") )
           $(this).css('display','');
         else
           $(this).css('display','none');
       }else{
         $(this).css('display','');
       }
     });
   });

 });
 </script>