javascript - How to search group words in div panel -


i made fiddle show want. have multiple panels words inside them. each word inside panel separated <br>.

i have make filter , hide panel not match words on search bar.

example : if type hamburger banana in search bar have show first panel , hide other. if type banana hamburger eggs show nothing.

do know javascript library or jquery way ? seen fusejs.io make want see it's made search inside json.

here html :

<div class="row" style="margin-top: 20px;margin-bottom: 20px;">   <div class="col-md-12">     <input type="text" class="form-control" placeholder="search..." />   </div> </div>  <div class="row">   <!-- first panel -->   <div class="col-sm-6">     <div class="panel panel-default" style="min-height: 150px;">       <div class="panel-body">         banana<br>         hamburger<br>         pizza<br>         cheese<br>         tomato<br>       </div>     </div>   </div>    <!-- second panel -->   <div class="col-sm-6">     <div class="panel panel-default" style="min-height: 150px;">       <div class="panel-body">         one<br>         two<br>         three<br>         four<br>       </div>     </div>   </div>  </div>   <div class="row">   <!-- thrid panel -->   <div class="col-sm-6">     <div class="panel panel-default" style="min-height: 150px;">       <div class="panel-body">         hey<br>         eggs<br>         stackoverflow<br>       </div>     </div>   </div>    <!-- fourth panel -->   <div class="col-sm-6">     <div class="panel panel-default" style="min-height: 150px;">       <div class="panel-body">         search<br>         me<br>         please<br>         dude<br>       </div>     </div>   </div>  </div> 

here's way allow user type i.e: banana 1 eg (even lowercase) , have matching fields remain visible:

jsfiddle demo

$(function() {    $('.form-control').on('input', function() {      var val = $.trim(this.value).replace(/\s+/g,"|");     var reg = new regexp(val, "ig");      $('.panel-body').show().filter(function() {       return !this.textcontent.match(reg);     }).hide();    });  }); 

while above show all boxes contain 1 of query words,
if instead want show boxes entirely match complete query string:

jsfiddle demo

$(function() {      var $panelbody = $('.panel-body');    $('.form-control').on('input', function() {      var val = $.trim(this.value).replace(/\s+/g,"|"),         reg = new regexp(val, "ig"),         matchmax = [];      if(!val) return $panelbody.show();      $panelbody.show().text(function(i, v) {       var r = v.match(reg);       this.max = 0;       if(r){         matchmax.push(r.length);         this.max = r.length;       }     }).filter(function() {       return this.max < math.max.apply( null, matchmax );     }).hide();    });  }); 

Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -