5

我该怎么做呢?

我有用于类型和过滤表数据的 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 -->

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

1 回答 1

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/

于 2013-05-10T07:57:39.933 回答