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

Question

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

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

例如，如果用户写入“al”，那么我将使用包含“al”的条目填充我的选择器。不幸的是，此类不包含实时搜索事件。你能建议另一门课吗？

任何输入都会有帮助

问候

Answer 1

您将需要 JavaScript。

这里是一个使用 jquery 的示例:

首先在 HTML 中，您需要将 select 元素包装到带有 id 的 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');
});