引导选择选择器 - 如何使用 javascript 将搜索文本放入选择选择器搜索框中并触发下拉列表以显示搜索结果？

Question

我正在构建 Razor Pages ASP.NET CORE 3.0 Web 应用程序。

我正在使用具有“data-live-search= true”的 Bootstrap“selectpicker”下拉列表。我正在用员工姓名填充下拉列表。以下是下拉代码。

<select id="spdd" name="spdd" asp-for="employee"
asp-items="@Model.employees"
value="Search" style=""
class="selectpicker show-tick form-control" data-live-search="true">
</select>

我正在使用“1.12.4”版本的 Bootstrap“selectpicker”-

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

我正在尝试在选择器下拉列表中搜索并显示与文本框中输入的搜索文本相匹配的员工姓名。单击搜索按钮时，我希望选择器下拉列表显示结果。以下是搜索文本框和搜索按钮的html代码。

<div class="col-xs-11 col-sm-11 col-md-6 col-lg-9"
style="padding-right:0px">
  <input type="text" asp-for="@Model.EmployeeSearchText"
  class="form-control" id="EmployeeSearchText"
  name="EmployeeSearchText" placeholder="Enter Employee Search Text"
  value="">
<div class="col-xs-1 col-sm-1 col-md-6 col-lg-9 text-left" style="padding-left:0px">
  <button class="btn btn-secondary" type="button" id="btnEmployeeSrch">
   <i class="fa fa-search"></i>
  </button>
</div>

以下是 jquery 脚本，尝试将员工搜索文本放入 selectpicker 搜索框中，并触发 selectpicker 下拉列表中的更改以根据搜索文本显示员工。

 $("#btnEmployeeSrch").click(function () {
                var EmployeeSearchText = $("#EmployeeSearchText");
                $('#spdd').parent().find('.bs-searchbox input').attr('value', EmployeeSearchText);
                $('#spdd').selectpicker('search.update')
                $("#spdd").trigger('propertychange');
                $('#spdd').selectpicker('refresh');
            })

上面的 jquery 代码不起作用。

问题：

1. 如何使用 javascript 将搜索文本放入选择器搜索框中并触发下拉列表以显示搜索结果？

Answer 1

您可以使用 'show.bs.select' 事件来触发 propertychange 事件。 我使用此功能来更改搜索文本：

function AsignaTextoContenidos(ddl, texto) {
        $('#'+ddl).on('show.bs.select', function (e) {
            var sp = $(e.currentTarget).parent(); // SelectPicker
            var btn = $(sp).find('button');
            var ariaOwns = $(btn).attr('aria-owns');
            var buscador = $('input[aria-controls="' + ariaOwns + '"]');
            $(buscador).val(texto);
            $(buscador).trigger('propertychange');
        });
    }