jquery在多选中选择了Shift选项？答案

【问题标题】：jquery chosen Shift option in Multi-select?jquery在多选中选择了Shift选项？
【发布时间】：2014-09-09 11:58:45
【问题描述】：

我正在使用 jQuery Chosen 插件来实现自动完成功能。是否可以使用 Shift + 箭头键选择多个并突出显示多选中的选项。请在下面找到快照：

任何帮助将不胜感激..!!!

在 selected.jquery.js 文件中，我添加了以下代码来实现 shift+箭头键的实现。

Chosen.prototype.keydown_checker = function(evt) {
  var stroke, _ref1;

  stroke = (_ref1 = evt.which) != null ? _ref1 : evt.keyCode;
  this.search_field_scale();
  if (stroke !== 8 && this.pending_backstroke) {
    this.clear_backstroke();
  }
  switch (stroke) {
    case 8:
      this.backstroke_length = this.search_field.val().length;
      break;
    case 9:
      if (this.results_showing && !this.is_multiple) {
        this.result_select(evt);
      }
      this.mouse_on_container = false;
      break;
    case 13:
      evt.preventDefault();
      break;
    case 38:
      evt.preventDefault();
      this.keyup_arrow();
      break;
    case 40:
      evt.preventDefault();
      this.keydown_arrow();
      break;
    case 16:
        if (this.result_highlight) {
            high = this.result_highlight;
            this.result_select(evt);
        }
        break;
  }
}

【问题讨论】：

请分享您尝试过的代码
我已经用上面的代码更新了帖子..

标签： jquery jquery-chosen shift

【解决方案1】：

我找到了解决办法……

在文件Chosen.js 版本1.8.7

第 132 行

this.selected_elements = [];
this.holding_shift = false;

第 475 行：

    case 16:
      if (this.results_showing && this.is_multiple){ 
        this.holding_shift = true; 
      }
      break;

第 526 行：

    case 27:
      if (this.results_showing) {
        this.results_hide();
      }
      break;
    case 16:
      if (this.results_showing && this.is_multiple) { this.holding_shift = false; }
      break;
    case 9:
    case 17:
    case 18:
    case 38:
    case 40:
    case 91:
      break;

第 1064 行：

Chosen.prototype.search_results_mouseup = function(evt) {
  var target;
  target = $(evt.target).hasClass("active-result") ? $(evt.target) : $(evt.target).parents(".active-result").first();

  //Support Shift + Select
  if (this.holding_shift) {
    if (this.selected_elements.length < 1) {
        target.addClass("first-selected selected-result");
        this.selected_elements.push(target);
        true;
    } else {
        let selected = null;
        const direction = target.prevAll('.first-selected').length > 0 ? 'back' : 'forward';

        if (target.get(0) === this.selected_elements[0].get(0)) { return false; }

        if (direction === "forward") {
            selected = target.nextUntil(this.selected_elements[0], ':not(.result-selected)').addBack().add(this.selected_elements[0]);
        } else {
            selected = target.prevUntil(this.selected_elements[0], ':not(.result-selected)').addBack().add(this.selected_elements[0]);
        }

        selected.each((i, elem) => {
            this.result_highlight = $(elem);
            return this.result_select(evt);
        });

        this.selected_elements[0].removeClass("first-selected selected-result");
        this.selected_elements = [];
        this.holding_shift = false;
        selected = false;

        return this.search_field.focus();
    }
    }

  else if (target.length) {

第 1209 行：

 if (this.is_multiple && (!this.hide_results_on_select || (evt.metaKey || evt.ctrlKey || evt.shiftKey))) {
          if (evt.metaKey || evt.ctrlKey || evt.shiftKey) {
            this.winnow_results({

和文件chosen.css

第 239 行：

.chosen-container .chosen-results li.highlighted, li.selected-result {

第 330 行：

  /*background-size: 100% 19px;
  background-repeat: repeat-x;*/

这就是所有人

【讨论】：