Bootstrap 4 фильтруемый выбор (раскрывающийся список)

Question

У меня есть проект Spring / Thymeleaf / Bootstrap 4, над которым я работаю. И я пытаюсь сделать что-то похожее на https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_filters_dropdown&stacked=h

Итак, я сделал следующее:

<div id="updateUser">
<select data-th-field="*{userId}"
        data-th-style="|width: 300px; max-width: 300px;|"
        class="form-control ml-2"
        aria-describedby="basic-addon2">
   <input class="form-control" id="userFilter" type="text">
   <option data-th-value="-1" text=""></option>
   <option data-th-each"user: ${userList}" 
           data-th-value="${user.id}"
           data-th-text="${user.getDisplayNameForDropdown()"></option>
</select>
</div>

<script data-th-inline="javascript">
  //<![CDATA[
  $(document).ready(function() {
    ...
    filterUsers();
  })

  function filterUser() {
    $("#userFilter").on("keyup", function() {
      let value - $(this).val().toLowerCase();
      $("#updateUser option").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  }
  //]]>

Без ввода выбор работает нормально, и все элементы параметров появляются и исчезают, как должно действовать раскрывающееся меню. Когда поле ввода находится в пути, поле выбора появляется, но не переключается, и поле ввода появляется под выбранным элементом, а все мои имена пользователей отображаются под полем ввода. Приятно то, что фильтр действительно работает с полем ввода.

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