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