ajax-bootstrap-select的单选搜索,支持liveSearch

复制代码
ajax-bootstrap-select支持liveSearch吗?

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

我之前只使用选择器,最近才使用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填充的选项,但是搜索关键字并不会改变下拉选项。

原文
关注
分享
反馈
Ribu
提问于2019-10-17 07:03
1 个回答
高票数最新
the Tin Man
修改于2020-05-25 01:49
得票数 1
试一试

$('.bootstrap-select').selectpicker('refresh');
复制
而不是

$('.bootstrap-select').selectpicker();
复制
有时,您可以使用检查器查看HTML中的更改,并需要在更改后刷新selectpicker。
复制代码

 

posted @   前端白雪  阅读(441)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
历史上的今天:
2022-01-06 scss里的符号&的用法
点击右上角即可分享
微信分享提示