JQuery когда найден дочерний выбор, примените изменения к каждому дочернему элементу

Question

У меня есть HTML форма <select> с набором <option>s.

Я хочу иметь отдельный поисковый запрос, ограничивающий количество опций теми, которые соответствуют поисковым значениям, если значение не пустое.

Я обнаружил множество почти JQuery вещей, чтобы сделать это, но они все либо слишком просты, либо слишком точны, либо иным образом непригодны.

HTML:

$(document).ready(function() {
  $('#searcher').on('change', function() {
    if ($(this).val() != '') {
      var searcher = $(this).val().toLowerCase();

      $("#pcdupes select option").filter(function() {
        return $(this).text().toLowerCase() !== ':contains(searcher)';
      }).each(function() {
        $(this).hide();
      });

    } else {
      $("#pcdupes").show().children().show();

    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type='text' id='searcher'>
<BR>
<BR>
<div class="infobox" id="pcdupes">
  <select name='choices' size='22'>
    <option id='1'>horses</option>
    <option id='2'>cows</option>
    <option id='3'>sheeps</option>
    <option id='4'>goats</option>
    <option id='5'>blind paruvian monster bats</option>
  </select>
</div>

Мне нужно jquery для:

• При изменении поля ввода;
  • если не пусто, тогда сделать нечувствительное к регистру сравнение со всеми текстовыми значениями в опциях.
  • только контейнер div имеет ссылку #id, не дочерний <select> или его дочерние
  • Отображаются только те <options>, которые соответствуют тексту в части .
    • Например; <option id='1'>horses</option> будет соответствовать текстовому значению "hors";

Я искал разные вещи для построения этой системы и узнал, как получить список правильных потомков, но потом не могу найти рабочий способ применить изменения для каждого ребенка. В настоящее время я не получаю консольных ошибок, но также не получаю никаких результатов; выбор пуст.

Как я могу это исправить?

Answer 1

Посмотрите на это.

$(function() {
  $('#searcher').on('input', function() {
    const val = this.value;
    const $options = $("#pcdupes select option"); // store collection in variable
    if (val != '') {
      const searcher = val.toLowerCase();
      $options     // this is just a variable name usedabove to store collection
        .hide()
        .filter(function() {
          return this.text.toLowerCase().indexOf(searcher) != -1;
        })
        .show();
    } else {
      $options.show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type='text' id='searcher' autocomplete="off" />
<BR>
<BR>
<div class="infobox" id="pcdupes">
  <select name='choices' size='22'>
    <option id='1'>horses</option>
    <option id='2'>cows</option>
    <option id='3'>sheeps</option>
    <option id='4'>goats</option>
    <option id='5'>blind paruvian monster bats</option>
  </select>
</div>