Question

我有一个jquery函数可以搜索表格中的单词。 e.g。

表

<table>
   <tr>
       <th>First Name</th>
       <th>Last Name</th>
       <th>Band Name</th>
   </tr>
   <tr>
       <td>John</td>
       <td>Lennon</td>
       <td>Beatles</td>
   </tr>
   <tr>
       <td>Paul</td>
       <td>McCartney</td>
       <td>Beatles</td>
   </tr>
   <tr>
       <td>George</td>
       <td>Harrison</td>
       <td>Beatles</td>
   </tr>
       <tr>
       <td>Ringo</td>
       <td>Starr</td>
       <td>Beatles</td>
   </tr>

现在。我有一个输入文本框，如果你根据表格在那里放任何单词，例如保罗结果将是一个只有paul mccartney的表。并且所有其他td元素都将被隐藏。

$(document).ready(function(){
            if (!RegExp.escape) {
                RegExp.escape = function (s) {
                    return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
                };
            }
            ///search this table
            jQuery(function ($) {
                ///search this table
                $(' #search ').click(function () {
                    var searchthis = new RegExp($(' #emp_search ').val().replace(/\s+/, '|'), 'i');
                    $("table").find("tr").slice(1).each(function (index) {
                        var text = $.trim($(this).text());
                        $(this).toggle(searchthis.test(text));
                    });

现在，我想要发生的是...... 如果我输入一个包含“Paul Harrison”的文本，结果应该是paul mccartney和george harrison ...那可能吗？喜欢输入多个单词并显示可能的结果？我只是jquery的新手。上面的代码不是我的..提前谢谢。：）

这是演示 http://jsfiddle.net/wind_chime18/D6nzC/7/

Answer 1

我认为基于正则表达式的搜索最适合这个

if (!RegExp.escape) {
    RegExp.escape = function (s) {
        return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
}

jQuery(function ($) {
    var $table = $("table");
    var bands = [];
    $table.find('td:nth-child(3)').each(function () {
        var text = $.trim($(this).text()).toLowerCase();
        if ($.inArray(text, bands) == -1) {
            bands.push(text);
        }
    }).get();

    ///search this table
    $(' #search ').click(function () {
        var parts = $(' #emp_search ').val().split(/\s+/);

        var bns = [],
            i = 0,
            idx;
        while (i < parts.length) {
            idx = $.inArray(parts[i].toLowerCase(), bands);
            if (idx >= 0) {
                bns.push(parts.splice(i, 1)[0]);
            } else {
                i++;
            }
        }

        var nameexp = parts.length ? new RegExp(parts.join('|'), 'im') : false;
        var bnexp = bns.length ? new RegExp(bns.join('|'), 'im') : false;

        $("table").find("tr").slice(1).each(function (index) {
            var $this = $(this);
            var name = $.trim($this.children().not(':nth-child(3)').text());
            var band = $.trim($this.children(':nth-child(3)').text());
            $(this).toggle((!nameexp || nameexp.test(name)) && (!bnexp || bnexp.test(band)));
        });
    });
});

演示：Fiddle

Answer 2

您可以先collapse所有行，然后split空格中的searchthis字符串，最后将visible添加到与其中一行匹配的行中...比如这样。

$(document).ready(function(){
    ///search this table
    $('#search').click(function() {
        var searchthis = $('#emp_search').val();
        $("table").find("tr").each(function(index) {
            if (index === 0) return;
            $(this).css('visibility', 'collapse');
        });
        var searchArray = [searchthis];
        if (searchthis.indexOf(' ') > -1) {
            searchArray = searchthis.split(' ');
        }
        $("table").find("tr").each(function(index) {
            if (index === 0) return;
            var id = $(this).find("td").text().toLowerCase().trim();
            for (var i = 0; i < searchArray.length; i++) {
                var txt = searchArray[i].toLowerCase().trim();
                if (id.indexOf(txt) !== -1) {
                    $(this).css('visibility', 'visible');
                }
            }
        });
    });
});

在jquery中表多字搜索

2 个答案: