Question

我该怎么做？

我有类型和过滤器表数据（http://jsfiddle.net/tutorialdrive/YM488/）的html和jquery代码，以及同一输入框中的类型和标签数据，但我想合并两者。

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

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

enter image description here

这是我在表格中搜索的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 -->

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*/

Answer 1

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

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

我刚才正在搜索类似的UI小部件。然而我的问题因某种原因而被关闭了。

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

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

jquery搜索表和标签数据

1 个答案: