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:
$(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:
$(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
Post a Comment