Как получить текущий выбранный элемент из фильтра / поиска Bootstrap?

Question

Я пытаюсь создать функцию фильтрации / поиска в Bootstrap.Всякий раз, когда пользователь ищет элемент и фильтр сужает выбор, сделанный до одного результата, тогда, если они выбирают ввод или они «выбирают» элемент.Он должен заполнить поле с этим элементом.У меня отключена базовая функциональность, но я не могу выбрать часть элемента.

$(document).ready(function() {
  $("#myList").toggle();

  $("#myInput").on("focus", function() {
    $("#myList").toggle();
  });

  $("#myInput").on("focusout", function() {
    $("#myList").toggle();
  });

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Filterable List</h2>
  <p>Type something in the input field to search the list for specific items:</p>
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth</li>
  </ul>
</div>

Моя конечная цель - выбрать элемент, выполнить его автозаполнение и заполнить поле.

Answer 1

Чтобы заполнить поле, вы можете просто поместить событие click в элементы и, когда один из них нажал, получить его текст и установить в поле.

Проблема в том, чтоваше событие focusout срабатывает до события click на элементе, поэтому оно скрывает список до того, как событие click вступит в силу.

Чтобы преодолеть это, вы можете установить небольшой тайм-аут (я поставил 100милисекунды), чтобы скрыть список после события click.И все будет работать!

$(document).ready(function() {
  $("#myList").toggle();

  $("#myInput").on("focus", function() {
    $("#myList").toggle();
  });

  $("#myInput").on("focusout", function() {
    // Here, it'll wait 100 miliseconds to hide the list.
    setTimeout(function() {
      $("#myList").toggle();
    }, 100);
  });

  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();

    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

  // This is the code to populate the field after selecting an option.
  $("#myList li").on("click", function() {
    var texto = $(this).text();
    $("#myInput").val(texto);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Filterable List</h2>
  <p>Type something in the input field to search the list for specific items:</p>
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth</li>
  </ul>
</div>