1

我有两个不同的问题。我正在尝试使用多选和快速搜索。第一个问题是，虽然我指定了一个限制，但是当我用optgroup选择时，它可以选择除了我给的限制之外的所有。2.我的问题是用 quicksearh 的搜索只是做里面的选项。我无法使用 optgroup 进行搜索。我该如何解决这两个问题？

https://jsfiddle.net/rgsjct12/31/


var _multiSelect, selectables, options;
var selectedOrder = [];
var limit = 2;

$(document).ready(function() {
  $(function() {
    $('#tracker_add').multiSelect({

      selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='search'>",
      selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='search'>",
      selectableOptgroup: true,
      afterInit: function(ms) {
        _multiSelect = this;
        //bu alan limit kısmı için
        if (this.$element.val() != null) {
          if (this.$element.val().length >= limit) {
            // disable all selectable elements
            selectables = this.$container.find(
              ".ms-elem-selectable");
            selectables.addClass(_multiSelect.options
              .disabledClass);
          }
        }

        $selectableSearch = _multiSelect.$selectableUl.prev(),
          $selectionSearch = _multiSelect.$selectionUl.prev(),
          selectableSearchString = '#' + _multiSelect.$container.attr(
            'id') + ' .ms-elem-selectable:not(.ms-selected)',
          selectionSearchString = '#' + _multiSelect.$container.attr(
            'id') +
          ' .ms-elem-selection.ms-selected';
        _multiSelect.qs1 = $selectableSearch.quicksearch(
            selectableSearchString, {
              'show': function() {

                $(this).prev(".ms-optgroup-label").show();
                $(this).show();
              },
              'hide': function() {
                $(this).prev(".ms-optgroup-label").hide();
                $(this).hide();
              }
            })
          .on('keydown', function(e) {
            if (e.which === 40) {
              _multiSelect.$selectableUl.focus();
              return false;
            }
          });

        _multiSelect.qs2 = $selectionSearch.quicksearch(
            selectionSearchString)
          .on('keydown', function(e) {
            if (e.which == 40) {
              _multiSelect.$selectionUl.focus();
              return false;
            }
          });


      },
      afterSelect: function(value) {
        //bu alan limit kısmı için
        selectedOrder.push(value[0]);
        if (this.$element.val().length >= limit) {
          // disable all selectable elements
          selectables = this.$container.find(".ms-elem-selectable");
          selectables.addClass(_multiSelect.options.disabledClass);

        }
        selectedOrder.prop('refresh');

        this.qs1.cache();
        this.qs2.cache();
      },

      afterDeselect: function(value) {
        //bu alan limit kısmı için
        selectedOrder.splice(selectedOrder.indexOf(value[0]), 1);
        if (this.$element.val() && this.$element.val().length <=
          limit) {
          // enable all selectable elements
          selectables = this.$container.find(".ms-elem-selectable");
          selectables.removeClass(_multiSelect.options.disabledClass);
        }

        this.qs1.cache();
        this.qs2.cache();
      }
    });
  });
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.4.0/jquery.quicksearch.min.js"></script>
<div class="card" >
  <div class="card-body" >

    <div class="form-group">
      <select id="tracker_add" name="tracker_add[]"  multiple="multiple">
        <optgroup label="Yumoş 1440">
          <option value="1">https://www.migros.com.tr</option>
          <option value="2">https://www.carfour.com.tr</option>
          <option value="3">https://www.macrocenter.com.tr</option>
        </optgroup>
        <optgroup label="Prima 3 Beden">
          <option value="4">www.a101.com.tr</option>
          <option value="5">https://www.carfour.com.tr</option>
          <option value="6">https://www.macrocenter.com.tr</option>
          <option value="8">https://www.migros.com.tr</option>

        </optgroup>
      </select>

    </div>
  </div>

4

0 回答 0