jQuery Multiselect - 全选和过滤搜索 [英] jQuery Multiselect - Select All and with Filtered Search

问题描述

当您使用 search 功能，然后使用 select_all 时，它不会一起工作，它选择所有内容"，就好像搜索没有改变一样，但是搜索本身隐藏"了元素.它应该只选择所有 visible

When you use the search feature, and then use the select_all it does not work together, it selects "everything" as if the search made no change, but the search itself "hides" the elements. It should only select all to the items that are visible

想知道其他人是否遇到过此问题或知道解决方案.如果有人可以提供帮助，再次感谢！

Wondering if someone else has had this issue or knows a solution to it. Thanks again if anyone can be of assistance!

使用 jQuery MultiSelect 插件:http://loudev.com

这是我目前使用的代码，搜索使用了quicksearch js

This is the code I'm currently using, the search utilizes the quicksearch js

$('.multiSelect').multiSelect({
  selectableHeader: "<div><a href='#' id='select-all'>select all</a></div><input type='text' class='search-input form-control' autocomplete='off' placeholder='search' style='margin-bottom:5px'>",
  selectionHeader: "<div><a href='#' id='deselect-all'>deselect all</a></div><input type='text' class='search-input form-control' autocomplete='off' placeholder='search' style='margin-bottom:5px'>",
  afterInit: function(ms){
    var that = this,
        $selectableSearch = that.$selectableUl.prev(),
        $selectionSearch = that.$selectionUl.prev(),
        selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
        selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

    that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
    .on('keydown', function(e){
      if (e.which === 40){
        that.$selectableUl.focus();
        return false;
      }
    });

    that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
    .on('keydown', function(e){
      if (e.which == 40){
        that.$selectionUl.focus();
        return false;
      }
    });
  },
  afterSelect: function(){
    this.qs1.cache();
    this.qs2.cache();
  },
  afterDeselect: function(){
    this.qs1.cache();
    this.qs2.cache();
  }
});


$('#select-all').on('click',function(){
  $('.multiSelect').multiSelect('select_all');
  return false;
});

$('#deselect-all').on('click',function(){
  $('.multiSelect').multiSelect('deselect_all');
  return false;
});

jsfiddle 用于演示:http://jsfiddle.net/b8ygzqca/6/

jsfiddle for demonstration: http://jsfiddle.net/b8ygzqca/6/

推荐答案

我昨天遇到了同样的问题.我也四处寻找解决方案，但只找到了你的帖子.所以这是我的解决方案.请注意，我实际上更新了源代码以使我的解决方案起作用.我修改了select_all"函数:

I ran into the same issue yesterday. I too looked around for solution, but only found your post. So here is my solution. Please note that I actually updated the source code to get my solution to work. I modified the 'select_all' function:

'select_all': function () {
        var that = this,
            ms = this.$element,
            values = ms.val(),
            selectables = this.$selectableUl.find('.ms-elem-selectable').filter(':not(.' + this.options.disabledClass + ')').filter(':visible');

        ms.find('option:not(":disabled")')
            .filter(function (index) {
                var it = this,
                    msValue = selectables
                        .filter(function () {
                            return $(this).data('ms-value') === it.value;
                        })
                        .data('ms-value');
                return msValue === this.value;
            })
            .prop('selected', true);
        selectables.addClass('ms-selected').hide();
        this.$selectionUl.find('.ms-optgroup-label').show();
        this.$selectableUl.find('.ms-optgroup-label').hide();
        this.$selectionUl
            .find('.ms-elem-selection')
            .filter(':not(.' + this.options.disabledClass + ')')
            .filter(function (index) {
                return that.$selectableUl.find('#' + $(this).attr('id').replace('-selection', '-selectable') + '.ms-selected' ).length === 1;
            })
            .addClass('ms-selected')
            .show();
        this.$selectionUl.focus();
        ms.trigger('change');
        if (typeof this.options.afterSelect === 'function') {
            var selectedValues = $.grep(ms.val(), function (item) {
                return $.inArray(item, values) < 0;
            });
            this.options.afterSelect.call(this, selectedValues);
        }
    },

我添加了一个that"变量，然后在 this.$selectableUl 和 this.$selectionUl 上添加了额外的过滤器调用.我还更新了如何选择 ms 上的选项.希望这对你也有用.

I added a 'that' var and then added extra filter calls on this.$selectableUl and this.$selectionUl. I also updated how the options on ms are selected. Hopefully this will work for you too.

这篇关于jQuery Multiselect - 全选和过滤搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！