在实时搜索事件中填充选择选择器答案

【问题标题】：populate select picker on live-search event在实时搜索事件中填充选择选择器
【发布时间】：2017-05-24 23:01:05
【问题描述】：

我正在使用一个从其他 API 填充的选择器 (https://silviomoreto.github.io/bootstrap-select/examples/#live-search)。

此时，我只有 30 个条目。但是，这个数字很快就会增长。我想从一个空的选择器开始，然后，当用户在实时搜索输入中写一些文本时，我只用相应的项目填充选择器。

例如，如果用户写“al”，那么我将使用包含“al”的条目填充我的选择器。不幸的是，此类不包含实时搜索事件。你能推荐其他课程吗？？

任何意见都会有所帮助

问候

【问题讨论】：

标签： jquery bootstrap-selectpicker

【解决方案1】：

您将需要 javascript。

这里是一个使用 jquery 的例子：

首先在 HTML 中，您需要将您的选择元素包装到一个带有 id 的 div 中，这样您就可以使用表单控件类来使用它的输入

<div id="my-div">
    <select id="my-select" class="selectpicker" data-live-search="true"></select>
</div>

现在在 javascript 文件中，您需要执行以下操作

$('#my-select').selectpicker('refresh');
$('#my-div .form-control').on('keyup', function () {
    //here you listen to the change of the input corresponding to your select
    //and now you can populate your select element


    $('#my-select').append($('<option>', {
        value: 'any value',
        text: 'any text'
    }));
    $('#my-select').selectpicker('refresh');
});

【讨论】：

【解决方案2】：

由于boostrap-select (or selectpicker) 还不支持此功能，我找到了解决方法。

这不是最佳做法，但确实有效。

 $('#youselectpicker').on('loaded.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        $(".youselectpicker .bs-searchbox input").on('keyup',function(){
            //place your code here
            //don't forget to refresh the select picker if you change the options
        })
      });

【讨论】：

【解决方案3】：

我的简单 jQuery 实现有效。

    jQuery("select[name='select picker name']").siblings().find("input[type='text']").keyup(function (e) {
        if(e.keyCode==13){
           //Code to implement ajax search
        }
    });

【讨论】：