jQuery Multiselect - 全选和过滤搜索

Question

当您使用search feature，然后使用select_all 时，它不能一起使用，它会选择“一切”，就好像搜索没有改变一样，但搜索本身会“隐藏”元素。它应该只选择所有visible

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

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

这是我目前使用的代码，搜索使用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/

Answer 1

我遇到了同样的问题，根据我的测试，您不需要更改源代码。

只需在你的afterInit 做prev() & find()，如下：

selectableHeader: "<div class='myDiv'><input type='text autocomplete='off'></div>"

$selectableSearch = that.$selectableUl.prev().find('input'),
$selectionSearch = that.$selectionUl.prev().find('input'),

请记住对于input 之前的每个div，您需要执行prev()。例如：

selectableHeader: "<div class='mydDiv'><input type='text'autocomplete='off'><a href='#' id='select-all'>Add All</a></div><div class='myExtraDiv'></div>

你需要这样做：

$selectableSearch = that.$selectableUl.prev().prev().find('input')

由于第一个prev()，会得到<div class='myExtraDiv'></div>，第二个prev() 会获取正确的input。

提示：运行 console.log($selectableSearch); 以查看您使用 prev() 选择的内容

希望这对某人有所帮助！

Answer 2

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

'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 上的选项。希望这对你也有用。