时间戳

首页 > 解决方案 > ajax-bootstrap-select 是否支持 liveSearch？

javascript - ajax-bootstrap-select 是否支持 liveSearch？

问题描述

我有一个基本的下拉菜单，它使用 bootstrap-selectpicker 库使用包含格式搜索下拉选项，我使用 ajax-bootstrap-select 插件https://github.com/truckingsim/Ajax-Bootstrap-Select填充下拉选项 ，我是试图找到一种方法来使用“包含”操作来搜索 ajax 填充的下拉选项，就像在原始 selectpicker 中一样。

我以前只使用 selectpicker，最近才使用 ajax 插件，我不确定插件的功能是否只是从“url”中获取选项。或者如果它从填充的选项中进行搜索并且我在编码时错过了任何参数。

<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>

我有 ajax 填充选项，但搜索关键字不会改变下拉选项。

标签： javascriptbootstrap-selectpicker

解决方案

尝试

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

代替

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

有时您可以使用检查器看到 HTML 中的更改，并且需要selectpicker在更改后刷新。

推荐阅读