jquery search in table and tag data [closed]

Question

How do I do this?

I have html and jquery code for type and filter table data (http://jsfiddle.net/tutorialdrive/YM488/) , and type and tag data in same input box, but i want to merge both.

I have tag code also but lost its library name so i'm unable to add that on jsfiddle,

i.e when I type in search name, or click on table data (01 Name Last name, etc.). Data should be tagged in above tag area (test x, test x).

Here is my html and jquery code for search in table

HTML

        <!-- table for search and 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 for search and filter ends -->

Jquery Code

        /* jquery for search nad filter table start*/

    $(document).ready(function(){
        // Write on keyup event of keyword input element
        $("#kwd_search").keyup(function(){
            // When value of the input is not blank
        var term=$(this).val()
            if( term != "")
            {
                // Show only 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 is no input or clean again, show everything back
                $("#my-table tbody>tr").show();
            }
        });
    });

    /* jquery for search nad filter table ends*/

Answer 1

Since you did not provide a token widget and since you are using jQuery might I suggest the UI widget Select2. It appears to have more features, wider support, and better documentation than Chosen (suggested in comments).

http://ivaynberg.github.io/select2/

I was on a search for a similar UI widget a while ago. My question was however closed for some reason.

https://stackoverflow.com/questions/11727844/is-there-an-approximate-alternative-to-harvests-chosen-out-there

If you are asking for someone to work out all the implementation code for you, might I suggest https://www.odesk.com/