$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) 搜索对几个字母不起作用

Question

我曾使用 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) 搜索项目，但它对我不知道的几个字母不起作用不知道为什么。我已经在 table td elements

上实现了搜索

我的代码：

<input id="button_id" type="text" class="form-control" placeholder="Search..">

$("#button_id").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#table_id td").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

已更新

如果我在 table td 中有 div，搜索是否有效？我有 html 个赞

<table class="" id="table_id">
<tbody><tr>
<td>
  <div class="row m-0">
  <div class="col-md-1">
    <input type="checkbox" class="" name="" id="" pname="" value="947">
  </div>
  <div class="col-md-7">
    product search item presents here  
  </div>
  <div class="col-md-2">
  </div>
  </div>
</td>

如果产品 div 的价格和渠道详细信息如下所示，它会起作用吗

<div class="col-md-7 myproduct_type1_div">
  <b>product search item presents here</b><br><b>0.75</b>                          
  <br>                                      
   1 Channel(s)                                             
</div>

谁能告诉我为什么搜索对字母不起作用 'a,b,c,e,h,i,l,n,t'

是否有任何其他替代方法来实现对 'table td' 元素的搜索。感谢您的帮助。

Answer 1

^{我假设你想要 hide/show 包含 <td> 的行匹配输入}

对过滤器中的 hide/show 元素使用 .toggle 不是一个好主意。您需要使用 .hide() 、 .show() 或类似的东西
您需要先 hide 行，然后再进行过滤
到select父行使用.closest();

$("#button_id").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#table_id tr").hide().find("td").filter(function() {
    return $(this).text().toLowerCase().indexOf(value) > -1;
  }).closest('tr').show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="button_id" type="text" class="form-control" placeholder="Search..">

<table id="table_id">
<tr>
  <td>Any thing Here</td>
  <td>Another thing row 1</td>
<tr>
<tr>
  <td>Any thing Here row 2</td>
  <td>Another thing</td>
<tr>
<tr>
  <td>Any thing Here</td>
  <td>Another thing row 3</td>
<tr>
</table>

如果你还想hide/show td's

$("#button_id").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#table_id td").hide().filter(function() {
    return $(this).find('.col-md-7').text().toLowerCase().indexOf(value) > -1;
  }).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="button_id" type="text" class="form-control" placeholder="Search..">

<table class="" id="table_id">
<tbody>
  <tr>
    <td>
      <div class="row m-0">
        <div class="col-md-1">
          <input type="checkbox" class="" name="" id="" pname="" value="947">
        </div>
        <div class="col-md-7">
          product 1 here
        </div>
        <div class="col-md-2"></div>
      </div>
    </td>
  <tr>
  <tr>
    <td>
      <div class="row m-0">
        <div class="col-md-1">
          <input type="checkbox" class="" name="" id="" pname="" value="947">
        </div>
        <div class="col-md-7">
          product 2 here
        </div>
        <div class="col-md-2"></div>
      </div>
    </td>
  <tr>
  <tr>
    <td>
      <div class="row m-0">
        <div class="col-md-1">
          <input type="checkbox" class="" name="" id="" pname="" value="947">
        </div>
        <div class="col-md-7">
          product 3 here
        </div>
        <div class="col-md-2"></div>
      </div>
    </td>
  <tr>
 </tbody>
</table>

$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) 搜索对几个字母不起作用

$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) search is not working for few letters

search

jquery