如何隐藏/显示表格div作用于键盘过滤器输入不区分大小写

Question

我列出了一些div，我希望能够添加一个允许用户开始输入的输入字段，并且可以按顺序过滤div

我正在尝试下面的代码，

这是我的代码

$(document).ready(function()
{
        $('#filter').keyup(function()
        {
        var val = $.trim(this.value);
                var tr = $('#tagstable tbody td');
                el = tr.find('label:contains('+val+')').closest('td')
                tr.not(el).fadeOut();
                el.fadeIn();
        })
});

此代码无效，与Case不敏感

无关

http://jsfiddle.net/e08o7uct/10/

Answer 1

$(document).ready(function() {
  $('#filter').on('input', function() {
    var val = $.trim(this.value).toLowerCase();
    var tr = $('#tagstable tbody td');
    el = tr.find('label:contains(' + val + ')').closest('td')
    tr.not(el).fadeOut();
    el.fadeIn();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="tagstable">
  <tbody>
    <tr>
      <td>
        <label data-tagid="1" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">hotel tag<span></span>
        </label>
      </td>
      <td>
        <label data-tagid="2" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">yoga tag<span></span>
        </label>
      </td>
      <td>
        <label data-tagid="3" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">jogging tag<span></span>
        </label>
      </td>
      <td>
        <label data-tagid="4" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">exercise tag<span></span>
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label data-tagid="5" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">aerobic tag<span></span>
        </label>
      </td>
      <td>
        <label data-tagid="6" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">running tag<span></span>
        </label>
      </td>
      <td>
        <label data-tagid="23" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">Body Building<span></span>
        </label>
      </td>
      <td>
        <label data-tagid="24" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">BB<span></span>
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label data-tagid="25" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">one<span></span>
        </label>
      </td>
      <td>
        <label data-tagid="26" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">two<span></span>
        </label>
      </td>
      <td>
        <label data-tagid="27" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">three<span></span>
        </label>
      </td>
      <td>
        <label data-tagid="28" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">four<span></span>
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label data-tagid="29" class="mt-checkbox mt-checkbox-outline">
          <input type="checkbox" class="chkclass">five<span></span>
        </label>
      </td>
    </tr>
  </tbody>
</table>

<input id="filter" type="text" class="form-control" placeholder="Type here...">

1. 添加到LowCase（）。
2. 将事件更改为输入

注意：

安全地使用toLowerCase()两个值