Bootstrap 4 引导4可过滤选择（下拉）

我有一个Spring/Thymeleaf/bootstrap4项目，我正在工作。我正试图做一些类似的事情

因此，我做了以下工作：

<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)
      });
    });
  }
  //]]>

// -1)
});
});
}
//]]>

在没有输入的情况下，“选择”可以正常工作，所有选项元素都会像下拉菜单一样出现和消失。在输入字段处于中间位置时，将显示选择框，但不会切换，输入字段将显示在选择框下方，所有我的用户名将显示在输入框下方。很好的一点是，过滤器可以处理输入字段

我只是不知道如何获得输入字段和选项来打开和关闭选择点击