Chosen: マルチセレクトで開いたまま

オプションを選択するときにCMD⌘またはCTRLを押したままにすると、選択は開いたままになります。 現在、デフォルトで選択オプションを保持するオプションはありません。

これはどういうわけか実装できますか？

どのような場合にこれが役立つか例を挙げていただけますか？

私のアプリケーションには、ユーザーが選択された複数選択ウィジェットから複数の年齢層を選択できる検索フォームがあります。 メニューが一瞬閉じられてから再び開くのは面倒です（フォーカスが開くイベントをトリガーするため）。

+1

+ 1-エンドユーザーがカテゴリごとに複数のアイテムでフィルタリングする可能性が最も高いフィルタリングメカニズムとしてChosenを使用しているという唯一の理由から。 現在の実装では、オプションを設定して必要な限り開いたままにするのではなく、ボックスを開いたままにする方法を説明するヘルパー行を含める必要があります。

絶対に+1 !! 複数のオプションを選択できるようにするために、選択を開いたままにしておく必要があるユースケースはたくさんあります。 実際、selectを開いたままにしておくことでメリットが得られるユースケースの数は、オプションを1つだけ選択した後にselectを閉じる必要があるユースケースの数よりも多いと思います。 その観点から、それを開いたままにしておくことはデフォルトの振る舞いでさえあるべきです。 「select-multiple」という名前は何もありません;-)しかし、それを開いたままにしておくことができる構成オプションで十分であり、それが本当にすぐに実装されることを願っています。

こんにちは、

誰かがこれを解決する方法を考え出しましたか？

次のことを試しても機能せず、openイベントがトリガーされません。

jQuery("select.select-chosen").on('change', function(evt, params) {
    jQuery(this).trigger('chosen:open');
});

アレクサンダー氏

@geebruおよび@silkfireごとに+1

これはおそらく、選択したコントロールをマルチモードで使用している人にとって最大の問題点です。特に、選択する必要のあるアイテムが2〜3個以上ある場合はそうです。 これが追加されるのを楽しみにしています。 ありがとう。

そのような機能の+1。 その間、私は次の「ハック」を使用して、複数の属性を持つ選択で機能するようにしました。

var chosen = $("#MySelect").chosen().data("chosen");
var autoClose = false;

//...

var chosen_resultSelect_fn = chosen.result_select;
chosen.result_select = function(evt) {
    var resultHighlight = null;

    if(autoClose == false)
    {
        evt["metaKey"] = true;
        evt["ctrlKey"] = true;

        resultHighlight = chosen.result_highlight;
    }

    var result = chosen_resultSelect_fn.call(chosen, evt);

    if(autoClose == false && resultHighlight != null)
        resultHighlight.addClass("result-selected");

    return result;
};

+1

+1

+1

+1

そんなに：+1：

上記のハックは機能しません。 result_selectはundefinedのようです。
$("#inputField").chosen().result_select;
v1.1.0とv1.0.0の両方で。

申し訳ありませんが、正しいコードは次のとおりです。
$("#inputField").chosen().data("chosen").result_select

ありがとう！ これはうまくいきます。 私は最終的にこのコードになります：

$chosen = $("#myChosenField").chosen();

var chosen = $chosen.data("chosen");
var _fn = chosen.result_select;
chosen.result_select = function(evt) {    
      evt["metaKey"] = true;
      evt["ctrlKey"] = true;
      chosen.result_highlight.addClass("result-selected");
      return _fn.call(chosen, evt);
};

ユーザー入力に基づいて複数の選択ボックスを生成する動的ページがあります。 Jarnoleconteからの上記のコードは、コンソールにエラーメッセージを生成する空の選択がある場合を除いて、うまく機能します。

Uncaught TypeError：未定義のmyfile.phpのプロパティ 'result_select'を読み取れません

とりあえず、これをifステートメントで囲みました。

$chosen = $("#myChosenField").chosen();

if ($("#myChosenField").length) {
  var chosen = $chosen.data("chosen");
  var _fn = chosen.result_select;
  chosen.result_select = function(evt) {    
  evt["metaKey"] = true;
  evt["ctrlKey"] = true;
  chosen.result_highlight.addClass("result-selected");
  return _fn.call(chosen, evt);
  };
}

したがって、これは当面は良い回避策ですが、これをオプションとして使用するための「+1」でもあり、 choose：stay_openに沿ったものであり、ドロップダウンに「閉じる」ボタンが追加されます。

選択ボックスがない場合、コードは明らかに機能しません。 私が投稿したコードは、理解しやすいように簡略化されています。 ラッパーなどを作成するなど、誰もがライブラリに自由に統合できるようにする必要があります。

興味のある方のために、フィルタリング/検索テキストの入力も維持したかったので、ellekzコードにいくつかの行を追加しました。 選択した1.2でうまく機能するようです。 選択したコードがまったくわからないので、何か問題があれば遠慮なく教えてください。

var chosen = $(chosenSelectClass).chosen().data('chosen');
var autoClose = false;
var chosen_resultSelect_fn = chosen.result_select;
chosen.search_contains = true;

chosen.result_select = function(evt) 
{
    var resultHighlight = null;

    if(autoClose === false)
    {
        evt['metaKey'] = true;
        evt['ctrlKey'] = true;

        resultHighlight = chosen.result_highlight;
    }

    var stext = chosen.get_search_text();

    var result = chosen_resultSelect_fn.call(chosen, evt);

    if(autoClose === false && resultHighlight !== null)
        resultHighlight.addClass('result-selected');

    this.search_field.val(stext);               
    this.winnow_results();
    this.search_field_scale();

    return result;
 };

それは本当にうまくいきます。 ありがとう@ronanquillevere ：white_check_mark：

+1

ハックに感謝します、それは確かに機能します。 this.winnow_results（）;のみを削除しました。 最も近いアクティブなオプションが強調表示されないように呼び出します。 今はもっと見えます...落ち着いて:-)

リストからオプションの選択を解除できるとさらに良いでしょう。 現在、それらは灰色になっているだけで、Xボタンでのみ削除できます。

+1

+1

+1、これは複数選択ドロップダウンに非常に必要です。

1つのページに複数の複数選択要素がある場合に@ronanquillevereが投稿した機能を修正する方法はありますか？

+1

+1

+1、複数選択する主な理由は、複数オプションを選択できるようにすることです。 Chosenは、すべてのオプションの選択メニューを再度開くことなく、これを高速に実行できるようにする必要があります。 これは、ユーザーが目的のオプションを見つけるためにスクロールしなければならない可能性がある長いリストで特に役立ちます。

2013年からオープンしているので、代わりにSelect2を使うことにしました。

+1

angle-chosenを使用している場合は、 @ ronanquillevereのコードをangular-chosenディレクティブのinitOrUpdate関数に配置するだけです（bower / npmを使用する代わりにソースコードを取得する必要があります）。

これが私がしたことです：

             (function () {
                var autoClose              = false;
                var chosen_resultSelect_fn = chosen.result_select;
                chosen.search_contains     = true;
                chosen.result_select       = function (evt) {
                  var resultHighlight = null;

                  if (autoClose === false) {
                    evt['metaKey'] = true;
                    evt['ctrlKey'] = true;
                    resultHighlight = chosen.result_highlight;
                  }
                  var stext = chosen.get_search_text();
                  var result = chosen_resultSelect_fn.call(chosen, evt);

                  if (autoClose === false && resultHighlight !== null)
                    resultHighlight.addClass('result-selected');

                  this.search_field.val(stext);
                  this.winnow_results();
                  this.search_field_scale();
                  return result;
                };
              })();

+1

+ 1-複数選択の可能性が高い複数選択がボックスが閉じないことを期待するのは論理的です。 CMD / ctrl + clickは優れた機能ですが、それは優れたUXではありません。

+ 1-最近、古い複数選択をChosenに置き換えました。ユーザーから寄せられる主な不満のひとつは、ドロップダウンが毎回閉じるため、リスト内の複数のアイテムを選択するのにクリック数が増えることです。 他の人と同じように、ハックを追加して、複数選択のためにデフォルトで開いたままにするつもりです。 それが選択肢の1つだったら本当にいいでしょう。

+1

+1

+1これは重要な機能です。 PRを手伝ってくれる人はいますか？

+1

こんにちはみんな、それを含む適切なリリースがあるときの見積もりはありますか？ または私は何かを逃しましたか？

この非常に必要な機能は、3か月間マスターになっているようです。

新しいリリースはどうですか？ :) :)

こんにちは、ページの更新後/ページのレンダリング後にユーザーが選択した複数の選択肢を保持しようとしています。
5つの複数の地区（アイテム）とメインキーワードを検索対象として選択しました。 同じ複数の選択肢の中から別のキーワードで検索したいことがよくあります。 ユーザーが複数の選択を繰り返す必要がある場合、それはあまりユーザーフレンドリーではありません。 Chosen Jqlibを使用しています。 どんな助けでもありがたいです。 ---ダッタ

@DATTAUは、通常のフォーム選択で行うのと同じ方法です。

koenpunt、説明してもらえますか？ お願いします！

uがずっと開いたままにする必要がある場合の回避策。
オンロードでは、これをfirstopenと呼びます
$("#" + selectId).trigger("chosen:open");

selected.jquery.jsには次の関数があります。
Chosen.prototype.results_hide = function() { if (this.results_showing) { this.result_clear_highlight(); this.container.removeClass("chosen-with-drop"); this.form_field_jq.trigger("chosen:hiding_dropdown", { chosen: this }); } return this.results_showing = false; };

次のように置き換えます。
Chosen.prototype.results_hide = function() { return false; };

私はこのようにしました、この方法を探してください
Chosen.prototype.result_select
別の条件で追加

Chosen.prototype.result_select = function(evt) {
  ...
  if (!(this.is_multiple && (!this.hide_results_on_select || (evt.metaKey || evt.ctrlKey)))) {
    //stay open temporary solution
    if (this.max_selected_options <= 0 || (this.max_selected_options > 0 && this.max_selected_options <= this.choices_count())) {
      this.results_hide();
      this.show_search_field_default();
    }
  }
  ...
};

それがバグなのか、このように作られたのかはわかりません。 「Ctrl」を押して複数選択したアイテムが18個ありますが、リストの15番目の要素を選択しようとすると、選択されていない最初のアイテムに自動的にスクロールします。 最後の位置で開いたウィンドウを維持するためのスイッチはありますか？

私はHarrisRobinのハックを使用しましたが、最初の選択で正常に機能しています。 選択したものを使用して複数の選択ボックスを使用しましたが、このハックは最初の選択ボックスよりも残りの選択ボックスでは機能しません。 誰か助けてくれませんか？

このページでコードスニペットをテストしましたが、デフォルトのテキストが「一部のオプションを選択」にリセットされているようです。また、同じページで複数選択しても機能しません。 これは便利な機能なので、修飾キーを押したままにするようにユーザーに指示する必要はありません。

皆さんこんにちは、

この機能は2019年に実装されていますか？ :)