Bootstrap Multiselect'沒有搜索結果消息'

Question

我正在使用搜索啓用引導多選。一切運作良好。問題是當用戶搜索一個不存在於下拉選項中的字符串，然後它沒有向用戶顯示任何消息，如'找不到結果'。顯示空白下拉菜單。

如果搜索字符串與任何下拉值不匹配，如何顯示'未找到結果的消息'。

下面是代碼：

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

感謝， 圖莎爾

Answer 1

對於當前版本的引導，多選的我做出了以下更改引導-multiselect.js文件。雖然我討厭編輯源文件，但沒有結果消息是客戶端的要求。

將此代碼上方 「buildFilter：功能（）」：

_$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（），I添加以下權利之前 「this.updateSelectAll（）;」：

//CUSTOM CODE 
this._toggleCustomNoResults(); 

本質上，當所有複選框被隱藏時，這段代碼將添加一個「No Results」消息。

Answer 2

這種外部代碼提供「沒有結果的比賽」用搜索關鍵字

$(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); 

});