i want text search filter data in jquery. suppose create 1 input box text search. name searchbox
. complete list appears below search box.
sn. name age destination 1 b test 2 c c test1 3 d d test 4 v v t1
i insert text test
. according keyword test
data appear in bottom side. cannot use datatable.
i tried no success
http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/
please help
as understand problem want search in html on webpage. have many options this. sharing on of these.
include jquery on html page
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
example html
<div class="span8 col-md-4"> <div style="width:329px;" class="span12 col-md-8"> <div class="row-fluid expandcollapse"> <div style="float:left;width:134px;font-weight: normal;"> <span class="permissionschecked"> <a style="position:relative; top:-4px; text-decoration:none; color:#000; line-height:32px;" data-original-title="process" rel="tooltip"> <input type="checkbox" data-permitted="1" value="1" name="aa" style="margin-left: 10px" checked="checked" for="l1_1" id="l1_1_2"> p1 </a> <br> <a style="position:relative; top:-4px; text-decoration:none; color:#000; line-height:32px;" data-original-title="view" rel="tooltip" > <input type="checkbox" data-permitted="1" value="4" name="aa" style="margin-left: 10px" checked="checked" for="l1_4" id="l1_4_2"> p2</a> <br> <a style="position:relative; top:-4px; text-decoration:none; color:#000; line-height:32px;" data-original-title="add"> <input type="checkbox" data-permitted="1" value="3" name="aa" style="margin-left: 10px" checked="checked" for="l1_3" id="l1_3_2"> p3</a> <br> </span> </div> </div> </div> </div>
now add final code search
$(document).ready(function(){ $("#filtersearch").keyup(function(){ // retrieve input field text , reset count 0 var filter = $(this).val(), count = 0; // loop through comment list $(".permissionschecked a").each(function(){ // if list item not contain text phrase fade out if ($(this).text().search(new regexp(filter, "i")) < 0) { $(this).fadeout(); // show list item if phrase matches , increase count 1 } else { $(this).show(); count++; } }); // update count var numberitems = count; $("#filter-count").text("number of comments = "+count); }); });
in above javascript code filtersearch text box in search data entered. if text matches in given html.
i hope helps. working fine end.
i created using given url tried. http://designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/
Comments
Post a Comment