populate select picker on live-search event

Question

I am using a selectpicker (https://silviomoreto.github.io/bootstrap-select/examples/#live-search) that I populate from a rest API.

At this point, I have only 30 entries. however, this number will grow very soon. I want to start with an empty selectpicker, then, when the user write some text in the live-search input, I populate the selectpicker only with the corresponding items.

for example, if the user writes "al", then I will populate my selectpicker with entries containing "al". unfortunately, this class does not contain events on live search. Could you suggest another class??

Any input will help

Regards

Answer 1

You will need javascript.

Here an example using jquery:

first in the HTML you need to wrap your select element into a div with id so you can use it's input using the form-control class

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

Now in the javascript file you will need to do the following

$('#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

Since boostrap-select (or selectpicker) does not support this yet, I've found a workaround.

This is not the best practice, but it works.

 $('#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
        })
      });