Question

我正在使用启用搜索的bootstrap多选。一切都很好。问题是当用户搜索下拉选项中不存在的字符串时，它没有向用户显示任何消息，如“找不到结果”。显示空白下拉列表。

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

以下是代码：

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

谢谢，图莎尔

Answer 1

对于当前版本的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();

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

Answer 2

此外部代码提供＆＃34;没有结果匹配＆＃34;搜索关键词

$(document).on("keyup", ".multiselect-search", function (e) {

    var thisObj = this;

    setTimeout(function () {

        if ($(thisObj).parent().parent().parent().find("li.multi-no-results").length == 0)
            $(thisObj).parent().parent().parent().append('<li style="display:none" class="multi-no-results cropin-multi-select-noresult-lable"><a  href="#">No results matched ""</a></li>');

        var totalOptions = $(thisObj).parent().parent().parent().parent().siblings().last().find("option").length;
        var totalFilteredOptins = totalOptions - $(thisObj).parent().parent().parent().find("li.filter-hidden").length;

        if (totalFilteredOptins <= 0) {
            $(thisObj).parent().parent().parent().find("li.multi-no-results").find("a").text('No results matched "' + $(thisObj).val() + '"');
            $(thisObj).parent().parent().parent().find("li.multi-no-results").show();
        }
        else {
            $(thisObj).parent().parent().parent().find("li.multi-no-results").hide();
        }

    }, 300);

});

带有'无搜索结果消息'的Bootstrap Multiselect

2 个答案: