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 for demonstration： http://jsfiddle.net/b8ygzqca/6/

Answer 1

昨天我遇到了同样的问题。我也四处寻找解决方案，但只找到了您的帖子。所以这是我的解决方案。请注意，我实际上已经更新了源代码，以使解决方案生效。我修改了“ 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上的选项。希望这也对您有用。

Answer 2

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

只需在您的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'),

请紧记div之前的每个input，您需要做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()选择的内容

希望这可以帮助某人！

jQuery Multiselect - 选择全部并使用过滤搜索

2 个答案: