jquery搜索表和标签数据

Shi*_*dya 5 html tags jquery jquery-ui

我该怎么做呢?

我有类型和过滤器表数据的html和jquery代码(http://jsfiddle.net/tutorialdrive/YM488/),并在同一输入框中键入和标记数据,但我想合并两者.

我也有标签代码,但丢失了它的库名,所以我无法在jsfiddle上添加它,

即当我输入搜索名称,或点击表格数据(01名称姓氏等)时.数据应标记在上面的标记区域(测试x,测试x).

在此输入图像描述

这是我在表格中搜索的html和jquery代码

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 -->
Run Code Online (Sandbox Code Playgroud)

Jquery代码

        /* 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*/
Run Code Online (Sandbox Code Playgroud)

Ser*_*hiy 1

由于您没有提供令牌小部件并且您正在使用 jQuery,因此我可能建议使用 UI 小部件 Select2。它似乎比 Chosen 有更多的功能、更广泛的支持和更好的文档(在评论中建议)。

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

不久前我正在寻找类似的 UI 小部件。然而,我的问题由于某种原因被关闭。

/sf/ask/820949111/

如果您要求某人为您制定所有实现代码,我可以建议https://www.odesk.com/