Question

我使用的是从rest API填充的selectpicker（https://silviomoreto.github.io/bootstrap-select/examples/#live-search）。

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

例如，如果用户写“al”，那么我将使用包含“al”的条目填充我的selectpicker。不幸的是，这个类不包含实时搜索的事件。你能建议另一个班级吗？

任何输入都有帮助

此致

Answer 1

你需要javascript。

这是一个使用jquery的例子：

首先在HTML中你需要将你的select元素包装成一个id为div的div，这样你就可以使用form-control类来使用它的输入

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

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

3 个答案: