javascript - jquery 中的表多词搜索

Question

我有一个 jquery 函数，可以在表中搜索单词。例如

表格

<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结果将是一个只有 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));
                    });

现在，我想要发生的是..如果我输入包含“保罗·哈里森”的文本，结果应该是保罗·麦卡特尼和乔治·哈里森……这可能吗？比如输入多个单词并显示可能的结果？我刚刚接触 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