html - jquery search in table and tag data -
how do this?
i have html , jquery code type , filter table data (http://jsfiddle.net/tutorialdrive/ym488/) , , type , tag data in same input box, want merge both.
i have tag code lost library name i'm unable add on jsfiddle,
i.e when type in search name, or click on table data (01 name last name, etc.). data should tagged in above tag area (test x, test x).
here html , jquery code search in table
html
<!-- table search , filter start --> <label for="kwd_search">search:</label> <input type="text" id="kwd_search" value=""/> <table id="my-table" border="1" style="border-collapse:collapse"> <thead> <tr> <th>name</th> <th>sports</th> <th>country</th> </tr> </thead> <tbody> <tr> <td>sachin tendulkar</td> <td>cricket</td> <td>india</td> </tr> <tr> <td>tiger woods</td> <td>golf</td> <td>usa</td> </tr> <tr> <td>maria sharapova</td> <td>tennis</td> <td>russia</td> </tr> </tbody> </table> <!-- table search , filter ends --> jquery code
/* jquery search nad filter table start*/ $(document).ready(function(){ // write on keyup event of keyword input element $("#kwd_search").keyup(function(){ // when value of input not blank var term=$(this).val() if( term != "") { // show matching tr, hide rest of them $("#my-table tbody>tr").hide(); $("#my-table td").filter(function(){ return $(this).text().tolowercase().indexof(term ) >-1 }).parent("tr").show(); } else { // when there no input or clean again, show $("#my-table tbody>tr").show(); } }); }); /* jquery search nad filter table ends*/
since did not provide token widget , since using jquery might suggest ui widget select2. appears have more features, wider support, , better documentation chosen (suggested in comments).
http://ivaynberg.github.io/select2/
i on search similar ui widget while ago. question closed reason.
if asking work out implementation code you, might suggest https://www.odesk.com/
Comments
Post a Comment