Заполнить селектор выбора на событии live-search

Question

Я использую селектор выбора ( https://silviomoreto.github.io/bootstrap-select/examples/), который я заполняю из API остальных.

На данный момент у меня есть только 30 записей. Однако это число будет расти очень скоро. Я хочу начать с пустого средства выбора, а затем, когда пользователь вводит некоторый текст в поле ввода в режиме реального времени поиска, я заполняю средство выбора только соответствующими элементами.

например, если пользователь пишет "al", я заполнил свой селектор выбора записями, содержащими "al". К сожалению, этот класс не содержит событий в режиме реального времени поиска. Не могли бы вы предложить другой класс?

Любой вклад поможет

С уважением

Answer 1

Вам понадобится JavaScript.

Вот пример использования jquery:

сначала в HTML вам нужно обернуть ваш элемент select в div с id, чтобы вы могли использовать его ввод с помощью класса управления формой

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

Answer 4

Для меня только это сработало в конце:

Объединив некоторые из ответов здесь, мой обходной путь прослушивает нажатие кнопки раскрывающегося списка, которая является событием show.bs.select в начальной загрузке, а затем прослушивает ввод в поле ввода, содержащееся в div (my_select_outer) я поместил весь раздел selectpicker. Это поле ввода создается начальной загрузкой при нажатии на selectpicker.

          $('#my_select').on('show.bs.select',
      function(e) {
            $('#my_select_outer .form-control').on('input', function() {
                $('#my_select').empty();
                $('#my_select').selectpicker('refresh');
                let contains = $('#my_select_outer .form-control').val();
                // run API call based on 'contains'
                });
          })
    });