Question

我是Jquery的新手。目的是使用一个文本框显示不同尺寸的库存。
例如，如果搜索框包含180和375，则显示两种尺寸的库存。
现在，我的代码仅适用于单一尺寸。
HTML：

<div>
<table>
<tr>
<td>Search</td>
<td><input type="text" id="search" name="search"/></td>
</tr>
</table>
</div>
 <table id="table">
                     <tr>
                        <th>Size</th>.
                        <th>Stock</th>
                     </tr>

                     <tr>
                        <td>180<td>
                        <td>250</td>
                     </tr>
                     <tr>
                        <td>180<td>
                        <td>750</td>
                     </tr>
                     <tr>
                        <td>375<td>
                        <td>1000</td>
                     </tr>
                     <tr>
                        <td>750<td>
                        <td>1500</td>
                     </tr>
                     <tr>
                        <td>1000<td>
                        <td>250</td>
                     </tr>
                     <tr>
                        <td>180<td>
                        <td>250</td>
                     </tr>
                     <tr>
                        <td>375<td>
                        <td>200</td>
                     </tr><tr>
                        <td>375<td>
                        <td>250</td>
                     </tr>

                  </table>

</div>

jQuery的：

<script>
$('document').ready(function(){
var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});
});
</script>

预期产出：

Search Box: 180,375
Size      Stock
180        250
180        750
180        250
1000       250

是否可能，如果是，那么请建议我。谢谢。

Answer 1

利用:contains()

由于您已经在使用jQuery，因此您可以利用:contains()选择器并使用一些逻辑为每个术语生成一些逻辑。

仅检查第一列

如果您只想定位第一列（即大小），那么您可以通过查找包含搜索词的元素然后显示/隐藏相应的行来执行此操作，如下所示：

$('#search').keyup(function(){
      var term = $(this).val();
      if(term.trim().length == 0){
        // Show everything if no text is present
        $('#table tr').show();
      }
      else{
         // Build your selectors
         var selectors = term.split(',').map(function(t){
             return '#table tbody tr :first-child:contains("' + t + '")';
         });
         // Hide all of the cells
         $('#table tbody tr').hide();
         $(selectors.join(',')).each(function(){
             // Find the parents of each child and display them
             $(this).closest('tr').show();
         });
     }
});

示例

＆＃13;
＆＃13;
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div> <table> <tr> <td>Search</td> <td> <input type="text" id="search" name="search" /> </td> </tr> </table> </div> <table id="table"> <thead> <tr> <th>Size</th> <th>Stock</th> </tr> </thead> <tbody> <tr> <td>180 <td> <td>250</td> </tr> <tr> <td>180 <td> <td>750</td> </tr> <tr> <td>375 <td> <td>1000</td> </tr> <tr> <td>750 <td> <td>1500</td> </tr> <tr> <td>1000 <td> <td>250</td> </tr> <tr> <td>180 <td> <td>250</td> </tr> <tr> <td>375 <td> <td>200</td> </tr> <tr> <td>375 <td> <td>250</td> </tr> </tbody> </table> <script> $(function() { $('#search').keyup(function() { var term = $(this).val(); if (term.trim().length == 0) { $('#table tbody tr').show(); } else { // Build your selectors var selectors = term.split(',').map(function(t) { return '#table tbody tr :first-child:contains("' + t + '")'; }); $('#table tbody tr').hide(); $(selectors.join(',')).each(function() { $(this).closest('tr').show(); }); } }); }); </script> </body> </html>
＆＃13;
＆＃13;
＆＃13;

检查两列

同样，如果您想要搜索任一列，那么只需使用:contains()元素上的<tr>调用就可以变得更加简单。

$('#search').keyup(function(){ var term = $(this).val(); if(term.trim().length == 0){ // Show everything if no text is present $('#table tr').show(); } else{ // Build your selectors (map each term to a contains statement) var selectors = term.split(',').map(function(t){ return '#table tr:contains("' + t + '")'; }); // Hide all of your rows and then target the selectors to display them $("#table tr").hide().filter(selectors.join(',')).show(); } });

示例

＆＃13;
＆＃13;
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div> <table> <tr> <td>Search</td> <td> <input type="text" id="search" name="search" /> </td> </tr> </table> </div> <table id="table"> <thead> <tr> <th>Size</th> <th>Stock</th> </tr> </thead> <tbody> <tr> <td>180 <td> <td>250</td> </tr> <tr> <td>180 <td> <td>750</td> </tr> <tr> <td>375 <td> <td>1000</td> </tr> <tr> <td>750 <td> <td>1500</td> </tr> <tr> <td>1000 <td> <td>250</td> </tr> <tr> <td>180 <td> <td>250</td> </tr> <tr> <td>375 <td> <td>200</td> </tr> <tr> <td>375 <td> <td>250</td> </tr> </tbody> </table> <script> $(function() { $('#search').keyup(function() { var term = $(this).val(); if (term.trim().length == 0) { $('#table tbody td').show(); } else { // Build your selectors var selectors = term.split(',').map(function(t) { return '#table tbody tr:contains("' + t + '")'; }); $("#table tbody tr").hide().filter(selectors.join(',')).show(); } }); }); </script> </body> </html>
＆＃13;
＆＃13;
＆＃13;

jQuery：如何使用一个文本框过滤多种类型的数据

1 个答案: