jquery - Bootstrap 多选 'No search Result message'

标签 jquery twitter-bootstrap bootstrap-multiselect

我正在使用启用搜索的 Bootstrap 多重选择。一切都运转良好。问题是,当用户搜索下拉选项中不存在的字符串时,它不会向用户显示任何消息,例如“未找到结果”。显示空白下拉菜单。

如果搜索字符串与任何下拉值都不匹配,如何显示“未找到结果消息”。

这是代码:

$('#mydropdown').multiselect({
      buttonWidth: '80%',
      enableCaseInsensitiveFiltering: true,
      onChange: function(option, checked, select){
          setValue();
      }
});

谢谢, 图沙尔

最佳答案

对于当前版本的 bootstrap-multiselect,我对 bootstrap-multiselect.js 文件进行了以下更改。虽然我讨厌编辑源文件,但无结果消息是客户的要求。

将此代码放在“buildFilter: function()”上方:

_$customNoResultsLi: null,
_toggleCustomNoResults: function () {
    if (this._$customNoResultsLi === null) {
        this._$customNoResultsLi = $('<li class="customNoResults">No Search Results</li>')
            .appendTo(this.$ul);
    }
    if (this.$ul.find('li:not(.filter-hidden) input[type="checkbox"]').length == 0) {
        this._$customNoResultsLi.show();
    } else {
        this._$customNoResultsLi.hide();
    }
},

然后在 buildFilter() 中,我在“this.updateSelectAll();”之前添加以下内容:

//CUSTOM CODE
this._toggleCustomNoResults();

本质上,当所有复选框都隐藏时,此代码将添加“无结果”消息。

关于jquery - Bootstrap 多选 'No search Result message',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32347336/

相关文章:

javascript - 如何在函数中返回 Ajax 的值?

jquery - 使用 jQuery 更改样式表

jquery - 使用 jquery position() 进行奇怪的定位

html - bg-info 不适用于 bootstrap 中的全身

javascript - 如何实现 Toast UI 图片编辑器?

带有 Internet Explorer 下拉菜单的 jQuery

javascript - 在 Bootstrap 中向工具提示内部添加描述

javascript - 单击 SelectAllOption 多选时未触发 onChange 事件

html - 引导多选 js 中的问题

javascript - bootstrap-sass 多选事件冲突