Chosen: 다중 선택 시 열린 상태 유지

옵션을 선택할 때 CMD ⌘ 또는 CTRL 을 누르고 있으면 선택이 열린 상태로 유지됩니다. 현재 기본적으로 선택 옵션을 유지하는 옵션이 없습니다.

이것이 어떻게든 구현될 수 있습니까?

어떤 경우에 이것이 유용할 것인지 예를 들어 주시겠습니까?

내 응용 프로그램에는 사용자가 선택된 다중 선택 위젯에서 여러 연령 그룹을 선택할 수 있는 검색 양식이 있습니다. 메뉴가 잠시 닫혔다가 다시 열리는 것은 성가신 일입니다(포커스가 열기 이벤트를 트리거하기 때문에).

+1

+1 - 최종 사용자가 범주당 여러 항목으로 필터링할 가능성이 가장 높은 필터링 메커니즘으로 선택됨을 사용하는 유일한 이유입니다. 현재 구현은 옵션을 설정하고 필요한 만큼 열어 두는 대신 상자를 열어 두는 방법을 설명하는 도우미 텍스트 줄을 포함 해야 함을 의미합니다.

무조건 +1!! 여러 옵션을 선택할 수 있도록 선택 항목을 열어 두어야 하는 사용 사례가 많이 있습니다. 사실, 선택을 열린 상태로 유지하는 것의 이점을 얻을 수 있는 사용 사례의 수가 단 하나의 옵션을 선택한 후 선택을 닫아야 하는 경우보다 많다고 생각합니다. 그런 관점에서 보면 열린 상태로 유지하는 것이 기본 동작이어야 합니다. 괜히 "select-multiple"이라는 이름이 붙은 것이 아닙니다. ;-) 그러나 열어 두는 구성 옵션이면 충분할 것이며, 그것이 곧 구현되기를 바랍니다.

안녕하세요,

누구든지 이것을 해결할 방법을 생각해 냈습니까?

다음을 시도하면 작동하지 않으며 열기 이벤트를 트리거하지 않습니다.

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

알렉산더 씨

@geebru 및 @silkfire 당 +1

이것은 아마도 다중 모드에서 선택된 컨트롤을 사용하는 사람들에게 #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의 위 코드는 콘솔에 오류 메시지를 생성하는 빈 선택 항목이 있는 경우를 제외하고는 훌륭하게 작동합니다.

잡히지 않은 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"이고, selected: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, 이것은 다중 선택 드롭다운에 매우 필요합니다.

한 페이지에 다중 선택 요소가 여러 개 있을 때 @ronanquillevere 가 게시한 수정 사항을 수정하는 방법이 있습니까?

+1

+1

+1, 다중 선택을 갖는 주된 이유는 다중 옵션을 선택할 수 있기 때문입니다. 선택자는 모든 옵션에 대해 선택 메뉴를 다시 열 필요 없이 이 작업을 빠르게 수행할 수 있도록 지원해야 합니다. 이것은 사용자가 원하는 옵션을 찾기 위해 스크롤해야 하는 긴 목록에 특히 도움이 됩니다.

이것은 2013년부터 열려 있으므로 대신 Select2를 사용하기로 결정했습니다.

+1

angular-chosen을 사용하는 경우 angular-chosen 지시문의 initOrUpdate 함수에 @ronanquillevere 의 코드를 배치하기만 하면 됩니다(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 - 우리는 최근에 오래된 다중 선택을 선택된 것으로 대체했으며 사용자로부터 받고 있는 주요 불만 중 하나는 매번 드롭다운이 닫히기 때문에 목록에서 여러 항목을 선택하는 데 더 많은 클릭이 필요하다는 것입니다. 다른 사람들과 마찬가지로 해킹을 추가하여 다중 선택에 대해 기본적으로 열린 상태를 유지합니다. 그것이 옵션 중 하나라면 정말 좋을 것입니다.

+1

+1

+1 이것은 중요한 기능입니다. PR에 도움을 줄 사람이 있습니까?

+1

안녕하세요 여러분, 그것을 포함하는 적절한 릴리스가 언제 나올지 예상하십니까? 아니면 내가 놓친 것이 있습니까?

이 많이 필요한 기능이 3개월 동안 마스터에 있었던 것 같습니다.

새로운 릴리스는 어떻습니까? :) :)

안녕하세요, 페이지 새로 고침 후/페이지가 렌더링된 후 사용자가 선택한 여러 항목을 유지하려고 합니다.
나는 5개의 복합지구(항목)와 검색의 주요 키워드로 선정되었습니다. 종종 동일한 다중 선택 내에서 다른 키워드로 검색하고 싶습니다. 사용자가 여러 선택을 반복해야 하는 경우 사용자 친화적이지 않습니다. 나는 Chosen Jq lib를 사용하고 있습니다. 도움을 주시면 감사하겠습니다. ---다타

@DATTAU 는 일반 양식 선택과 동일한 방식으로 수행됩니다.

koenpunt, 설명할 수 있습니까? 제발!

끝까지 열어 두어야 하는 경우 해결 방법.
onload에서 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의 해킹을 사용했으며 첫 번째 선택에서 제대로 작동합니다. 나는 selected를 사용하여 여러 선택 상자를 사용했지만 이 해킹은 첫 번째 선택 상자보다 나머지 선택 상자에서 작동하지 않습니다. 누구든지 저를 도와주시겠습니까?

이 페이지에서 코드 스니펫을 테스트했는데 기본 텍스트를 "일부 옵션 선택"으로 재설정하는 것으로 보이며 동일한 페이지에서 여러 다중 선택에서도 작동하지 않습니다. 이것은 사용자에게 수정자 키를 누르고 있으라고 지시할 필요가 없도록 하는 좋은 기능입니다.

여러분 안녕하세요,

이 기능이 2019년에 지금 구현되나요? :)