Блог

Главная - Вопросы по программированию - Как скрыть / показать таблицу div, действующую на ввод фильтра ввода без учета регистра

Как скрыть / показать таблицу div, действующую на ввод фильтра ввода без учета регистра

#jquery

#jquery

Вопрос:

У меня есть несколько разделов, которые перечислены, и я хочу иметь возможность добавить поле ввода, которое позволит пользователю начать вводить текст, и разделы будут соответствующим образом отфильтрованы

Я пытаюсь использовать приведенный ниже код,

Это мой код 

 $(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();
        })
});

Этот код не работает независимо от учета регистра

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

Комментарии:

1. он скрывает div что вы подразумеваете под неработающим?

2. Я имею в виду, например, введите пять вместо пяти (с учетом регистра)

3. попробуйте эту демонстрацию , которую я добавил .toLowerCase() , и change the event to on input просто чтобы убедиться, что вы можете добавить toLowerCase() к обоим значениям

4. Большое спасибо …. это решило проблему.

Ответ №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. Добавлен toLowerCase() .
  2. Измените событие на при вводе

Примечание:

для обеспечения безопасности используйте toLowerCase() оба значения