jquery - 在实时搜索事件中填充选择器

Question

我正在使用从 rest API 填充的选择器（https://silviomoreto.github.io/bootstrap-select/examples/#live-search）。

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

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

任何输入都会有所帮助

问候

Answer 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');
});

Answer 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
        })
      });

Answer 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
        }
    });