在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 ，结果将是只有保罗·麦卡特尼的表格。所有其他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

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'); 
       } 
      } 
     }); 
    }); 
});