How to text search in JQuery -


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">                         &nbsp;<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>                         &nbsp;<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>                         &nbsp;<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