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

Метод 1: использование плагина Select2
Один из самых простых способов добавить функцию поиска в раскрывающиеся меню Bootstrap 4 — использовать плагин Select2. Select2 — это многофункциональный плагин jQuery, который расширяет стандартные элементы выбора HTML дополнительными функциями, включая функции поиска. Вот пример использования Select2 с раскрывающимся списком Bootstrap 4:

<select class="select2">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <!-- Add more options here -->
</select>
<script>
  $(document).ready(function() {
    $('.select2').select2();
  });
</script>

Метод 2: реализация собственного JavaScript
Если вы предпочитаете более легкое решение, не полагаясь на дополнительные плагины, вы можете реализовать функцию поиска с помощью собственного кода JavaScript. Вот пример того, как этого добиться:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select an option
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <input class="form-control dropdown-search" type="text" placeholder="Search">
    <a class="dropdown-item" href="#">Option 1</a>
    <a class="dropdown-item" href="#">Option 2</a>
    <a class="dropdown-item" href="#">Option 3</a>
    <!-- Add more options here -->
  </div>
</div>
<script>
  $(document).ready(function() {
    $('.dropdown-search').on('input', function() {
      var searchValue = $(this).val().toLowerCase();
      $('.dropdown-item').filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(searchValue) > -1);
      });
    });
  });
</script>

Метод 3: Bootstrap 4 опережающего ввода
Bootstrap 4 также предоставляет встроенный компонент опережающего ввода, который можно использовать для создания раскрывающихся списков с функцией поиска. Вот пример использования шрифта Bootstrap 4:

<input class="typeahead form-control" type="text" placeholder="Search">
<script>
  $(document).ready(function() {
    var options = ['Option 1', 'Option 2', 'Option 3'];
    $('.typeahead').typeahead({ source: options });
  });
</script>

Добавление функции поиска в раскрывающиеся меню Bootstrap 4 повышает удобство работы пользователей, позволяя им быстро находить и выбирать нужный вариант. В этой статье мы рассмотрели три метода: использование плагина Select2, реализацию собственного кода JavaScript и использование компонента опережающего ввода Bootstrap 4. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и предоставьте пользователям удобное раскрывающееся меню.