带有“无搜索结果消息”的 Bootstrap 多选

omjgkv6w  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(199)

我正在使用bootstrap多选功能,并启用了搜索功能。一切都运行良好。问题是当用户搜索下拉选项中不存在的字符串时,它不会向用户显示任何消息,如“未找到结果”。显示空白下拉列表。
如果搜索字符串与任何下拉列表值都不匹配,如何显示“未找到结果”消息?
代码如下:

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

谢谢你,图沙

k3bvogb1

k3bvogb11#

对于当前版本的bootstrap-multiselect,我对bootstrap-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()中,我在“this.updateSelectAll();“:

//CUSTOM CODE
this._toggleCustomNoResults();

实际上,当所有复选框都隐藏时,此代码将添加一条“No Results”消息。

t30tvxxf

t30tvxxf2#

此外部代码为搜索关键字提供“无匹配结果“

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

});
rqqzpn5f

rqqzpn5f3#

这适用于新版本2,在bootstrap-multiselect.js js文件buildFilter函数中,放置以下代码并使用css对其进行设计。正确位置的图像
enter image description here

if ($('input[value!="' + this.options.selectAllValue + '"] 
 [type="checkbox"]:visible', this.$ul).length == 0) {
 $(".multiselect-all").hide();
 $(".multiselect-container").append('<div class="multi_not_found 
 multiselect-option"><label class="form-check-label">No result 
 found</label></div>');
 }
 else {
 $(".multi_not_found").remove();
  $(".multiselect-all").show();
}

相关问题