CODEWITHSUNDEEP
javascriptbootstrap-selectpicker
Ribu
Ribu

Reputation: 121

Does ajax-bootstrap-select support liveSearch?

I have a basic dropdown that uses bootstrap-selectpicker library to search the dropdown options using a contains format and I populated dropdown options using ajax-bootstrap-select plugin https://github.com/truckingsim/Ajax-Bootstrap-Select and I am trying to find a way to search the ajax populated dropdown options using the "contains" operations as in original selectpicker.

I was previously using selectpicker only and just used ajax plugin recently and I am not sure if the plugin's function is only to fetches the options from the 'url'. or if it does the search from populated options and I've missed any parameter while coding for it.

<select class="selectpicker" multiple data-selected-text-format="count" data-actions-box="true" data-live-search="true" data-show-tick="false" data-live-search-style="contains">
</select>

<script>
var options = {

    ajax: {

    url: '/Search/Typeahead',

    type: 'POST',

    dataType: 'json',

    data: function () {
        var params = {
            q: '{{{q}}}'
        };

        return params;
    }
},

locale: {
        emptyTitle: 'Select and Begin Typing'
},

preprocessData: function (data) {
    var i, l = data.length, array = [];
    if (l) {
        for (i = 0; i < l; i++) {
            var curr = data[i];

            array.push({
                'value': curr.value,
                'text': curr.text,
                'disabled': curr.disabled,
                'selected': curr.selected,
            });
        }
    }
    return array;
},

preserveSelected: false
};
$('select.selectpicker').selectpicker({liveSearch: true }).ajaxSelectPicker(options);

$('.bootstrap-select').selectpicker();

//The dropdown options are not displayed at all if I use **.filter('.with-ajax')** as below:
//$('select.selectpicker').selectpicker({liveSearch: true }).filter('.with-ajax').ajaxSelectPicker(options);

//Also tried using <select class="selectpicker **with-ajax** " but it doesn't work for me either

$('select.selectpicker').trigger('change');
</script>

I have the ajax populated options but the searching for a keyword does not alter the dropdown options.

Upvotes: 1

Views: 4609

Answers (1)

Moriya Shtern
Moriya Shtern

Reputation: 11

Try

$('.bootstrap-select').selectpicker('refresh');

instead of 

$('.bootstrap-select').selectpicker();

Sometimes you can see the change in HTML using the inspector, and need to refresh the selectpicker after a change.

Upvotes: 1

Related Questions