Chosen: اجعل تسميات optgroup قابلة للنقر

سيكون هذا مفيدًا ، لكن اختيار html القياسي لا يسمح بذلك.

@ Fr3nzzy : نعم ، ولكن إذا كانت اختيارية ، فلن تكون هذه مشكلة ، أليس كذلك؟

@ Fr3nzzy : إذا

@ greg0ire : +1 ، أنا أيضًا أبحث عن هذا: o)

@ pilap82 ومع ذلك ، حدد يدعم البحث عن عنصر عن طريق كتابة اسمه.

عادل بما يكفي :)

ربما ليس أفضل مكان للرقعة ، لكني آمل أن يساعد:

$( '.chzn-results .group-result' ).each( function () {
    var self      = $( this )
        , options = $( '~li', self )
        , next    = options.filter( '.group-result' ).get( 0 )
    ;
    self.data( 'chzn-options', options.slice( 0, options.index( next ) ) );
} )
.click( function () { 
    $( this ).data( 'chzn-options' ).mouseup()
 } )
.hover( function () { 
    $( this ).data( 'chzn-options' ).addClass( 'highlighted' );
 }, function () { 
    $( this ).data( 'chzn-options' ).removeClass( 'highlighted' );
 } )
.css( { cursor: 'pointer' } );

هذا هو فكرة عظيمة. أنا على استعداد لتقديم طلب سحب إذا كان الفريق الأساسي مفتوحًا لدمجه. ما رأيكpfiller؟

عينة من الدفعة المختارة مع المختار:

http://vafada.github.com/chosen-dojo/

أحسنت!

أرغب في رؤية هذا تمت إضافته إلى Chosen ، ولكن يجب إضافة الاستماع إلى الحدث بطريقة أقل كثافة. يطبق حل adriengibrat مستمعًا لكل مجموعة لا تؤدي أداءً جيدًا إذا كانت هناك مئات المجموعات. لدينا بالفعل حدث نقر على نتائج البحث div يمكن اختباره مقابل مجموعات الخيارات. إذا تم تعيين الخيار ، فيجب استخدام css لتغيير لون الخلفية.

+1. كنت أفكر أنه عند تحديد optgroup ، فإنه (اختياريًا) سيعطل / يخفي جميع أبنائه.

+1 لهذه الميزة

pfiller أي تحديث لهذا أو على فرع search_improvements؟ أحب أن أراها مدمجة في الإتقان.

أحتاج مجموعات قابلة للتحديد أيضًا. حاولت في الأصل تغيير الكود - ثم استلهمت الفكرة من الإجابة التي يتم تقديمها كثيرًا إلى "تخطي optgroup وإضافة مسافات لتأخير العناصر الفرعية". بدا ذلك فظيعًا ، ولكن نظرًا لأن CSS تم تصميمه بشكل جيد على Chosen ... فماذا عن استخدام فئة غير مجموعة اختيار واستخدام فئة على كل خيار لجعلها تبدو وكأنها شاشة مجمعة؟

يمكنك أن ترى نسخة أساسية في هذا الكمان: http://jsfiddle.net/slothbear/9xqpF/

لم أقضي الكثير من الوقت في الأسلوب ، لكنك ستحصل على الفكرة. يوفر هذا ميزتين أحتاجهما - مجموعات optgroups القابلة للتحديد ، ومجموعات optgroups القابلة للبحث. كل ذلك بدون optgroups.

أنا على وشك المضي قدمًا في استخدام هذه التقنية في مشروعي ، لكنني أبحث عن تعليقات. يبدو أنه يعمل. هل يمكنك التفكير في طريقة أفضل؟ أو أي مسك؟

_لقد أدركت أنني ربما يجب أن أذكر - هذا الكمان يستخدم Koenpunt fork of Chosen ، لتمكين إضافة الخيار. لكن لا أعتقد أن هذا يؤثر على هذا المثال.

_ أنا أيضًا أبحث عن إرشادات. أعلم أن هذه التقنية ربما تكون بعيدة جدًا عن الفلسفة المختارة للالتزام بميزات select - ولكن إذا كان الخيار مناسبًا لهذه الميزة ، فسأكون سعيدًا للقيام بهذا العمل.

+1 لهذه الميزة ، وجدت أنه تم اختيارها أثناء البحث عن طريقة لدعم ذلك

(كنت أبحث عن القدرة على تحديد عنوان المجموعة أو تحديد عنصر المجموعة) وفقًا لما ورد في Slothbear أعلاه

تحرير: في النهاية قمت بمحاكاة القيام بما يلي.
لاحظ الفصول ، أضفت أيضًا .clickable إلى css الذي يضبط المؤشر على مؤشر.

<select name="category" data-placeholder="Choose a category..." class="chosen-select">
    <option value="group-1 class="group-result clickable">Group Title</option>
    <option value="1" class="group-option">Item Name</option>
    <option value="2" class="group-option">Item Name</option>
</select>

هنا هو الحل الخاص بي. على الرغم من أنها مخصصة لاحتياجاتي ، إلا أنه يمكن بسهولة تعديلها وتغييرها حسب احتياجاته.

مثال:
سيارات
-سيارة 1
-سيارة 2
-سيارة 3
طائرة
الطائرة 1
-الطائرة 2

ما فعلته هو إنشاء خيار جديد في بداية كل المجموعات ، وبهذه الطريقة ، ستأتي خيارات "الكل" بعد المجموعات مباشرةً:
سيارات
-جميع السيارات
-سيارة 1
-سيارة 2
-سيارة 3
اشخاص
-كل الناس
-الأشخاص 1
- شخص 2

في "results_option_build" ، مرر خيار "الكل" إلى "result_add_group" كمعامل ثانٍ عندما تكون البيانات مجموعة ، وتخطَّ خيار "الكل" في التكرار التالي:

إذا (data.group) {
content + = this.result_add_group (data، _ref [++ _ i])

الآن ، دعنا ننتقل إلى "result_add_group" واستبدل المجموعة بالخيار الذي مررنا به ، لكن احتفظ بنمط المجموعة:
result_add_group = وظيفة (مجموعة ، خيار) {
.
.
إرجاع "

هذا كل شيء .. إذا أردت ، قم بتغيير المؤشر إلى المؤشر في المغلق.

لا يبدو أن أيًا من هؤلاء يأخذ القدرة على البحث في الاعتبار. بشكل افتراضي في الاختيار ، إذا كنت تبحث عن خيار ، فسوف يعرض تسمية المجموعة أيضًا. هذه الطريقة ليست كذلك ، إذا كان لدي عدة مجموعات ولديها خيارات متطابقة ، فهذا سيجعلها في نهاية المطاف مع قائمة بالعناصر المتطابقة بصريًا.

سيكون من المثير للاهتمام للغاية أن يتم دمجها كخيار في المكتبة ، بقدر ما سيسهل إدارة الاختيار المتعدد. هل أشرت إلى الضغط في بعض الإصدارات؟ تحيه

لقد تم تنفيذ هذا فقط باستخدام جافا سكريبت ، إنه إصلاح مؤقت. لا أستخدمه في تحديدات متعددة ، لكنني أستخدمه للتجميع المخصص. انتهى بي الأمر بجعل المجموعات خيارات ولكنها تبدو مثل المجموعات ، وأعطيت الكلمات الرئيسية لـ "المجموعات" التي عندما تقوم بالبحث عن الخيار الفرعي ، ستظهر المجموعة كما لو كانت عادةً في selected.js http: // stackoverflow. كوم / ف / 22336052/744228

لقد أضفت هذا إلى نسختي المحلية من المختار لأنه كان متطلبًا لمشروعي. كان الأمر سهلاً إلى حد ما في النهاية.

في الدالة set_default_values أضع this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false; في النهاية.

ثم في result_add_group قمت بتغيير الفئات المخصصة للمجموعة لتكون

if (this.group_selectable) {
        group_el.className = "active-result group-result";
      } else {
        group_el.className = "group-result";
      }
group_el.setAttribute("data-group-array-index", group.array_index);

وأخيرًا وليس آخرًا في result_select قليلًا من الاختراق والإضافة

if (high[0].getAttribute("data-group-array-index")) {
          var that = this;
          high.nextUntil('.group-result').each(function(index, element) {
            that.result_highlight = $(element);
            that.result_select(evt);
          });
        }

فقط قبل
item = this.results_data[high[0].getAttribute("data-option-array-index")];

انظر الكود الكامل على https://gist.github.com/ruhley/9944574

https://gist.github.com/ruhley/9944574#file -chosen-jquery-js-L1005

var itm = that.results_data[element.getAttribute("data-option-array-index")];
if(itm && !itm.selected){
    that.result_highlight = $(element);
    that.result_select(evt);
}

تأخرت قليلاً على الحفلة ، لكن: +1 لهذه الميزة!

ruhley +1
مجرد تفصيل صغير موجود في صفحة الشفرة الكاملة ولكن ليس في مقطع الكود: هناك ملف
آخر{
في عداد المفقودين في النهاية.

أهلا،
شكرًا لك ruhley على التعليمات البرمجية الخاصة بك.
ولكن مع التعديلات التي أجريتها ، لا يتم تعطيل المجموعة بعد النقر عليها ويمكن إعادة تحديدها.

فيما يلي التحسينات التي أجريتها (بناءً على 1.4.2 المختار):

• بعد السطر 158 ، في وظيفة "set_default_values" ، أضف:

this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false;

_إضافة المعلمة_

• تغيير السطر 222 ، في وظيفة "results_option_build" ، مع:

content += this.result_add_group(data, _ref.slice(_i+1, _i+data.children+1));

_ أعط الأطفال لوظيفة "result_add_group".

• تغيير السطر 272 ، إعادة تعريف وظيفة "result_add_group" ، مع:

AbstractChosen.prototype.result_add_group = function(group, childrens) {

_ من أجل استقبال الأبناء_

• بعد السطر 285 ( group_el = document.createElement("li"); ) ، في وظيفة "result_add_group" ، أضف:

if (this.group_selectable) {
  var all = true;
  $.each(childrens, function(index, element) {
    if(!element.selected){
      all = false;
    }
  });
  if(!all) {
    classes.push("active-result");
  } else {
    classes.push("result-selected");
  }
}
group_el.setAttribute("data-group-array-index", group.array_index);

_ هذا يجعل المجموعة قابلة للنقر إذا لم يتم تحديد طفل واحد على الأقل. (هذا الجزء قابل للتحسين بسبب متغير "الكل").

• بعد السطر 1052 ( high.addClass("result-selected"); ) ، في وظيفة "result_select" ، أضف:

if (high[0].getAttribute("data-group-array-index")) {
  var that = this;
  high.nextUntil('.group-result').each(function(index, element) {
    if($(element).hasClass('active-result')) {
      that.result_highlight = $(element);
      that.result_select(evt); 
    }
  });
} else {

_ هذا فقط يضيف الأطفال غير المختارين.

• بعد السطر 1083 ، في وظيفة "result_select":

}

_ يلزم إغلاق حالة المجموعة التي تم النقر عليها.

لا تنسى وضع مسافة بادئة صحيحة لهذا الجزء من الكود ؛)

هذه نسخة كاملة من ملفي: https://gist.github.com/GuillaumeSTEIN/7a4ece3c6bb487d16df0
هنا فرق (1 سنة متوفرة): https://www.diffnow.com/؟report=8zhe9
استمتع

هل هذا ما زال غير مطبق؟

GuillaumeSTEIN لقد جربت البرنامج النصي للإصدار الكامل الخاص بك ، ولا يبدو أن شيئًا يتغير.
هل أحتاج إلى إضافة بعض المعلمات أو الفئات الخاصة إلى HTML لجعلها تعمل؟
ربما يمكنك عمل مثال عملي على http://codepen.io/ أو jsfiddle؟

نعم ، تحتاج إلى تعيين الخيار: group_selectable to true لتفعيل هذه الميزة

شكرًا GuillaumeSTEIN ، لقد أفتقده من البرنامج النصي

المجموعات المختارة لديها فئة "نتيجة مختارة".
يمكنك عمل بعض CSS. إليك ما كتبته ، قد تحتاج إلى تكييفه وفقًا لاحتياجاتك:

 select.form-control + .chosen-container-multi .chosen-results li.result-selected{
     display: list-item;
     color: #ccc;
     cursor: default;
     background-color: white;
 }

لقد طعنت فيه # 2678

ستكون هذه ميزة مفيدة! أحب أن أراها مطبقة!

+1 لهذه الميزة.

إذا وجد شخص ما هذا مفيدًا ، فأنا أحصل على slothbear jsfiddle

• الزر "مسح الكل"
• يؤدي تحديد عنصر فئة الجذر إلى تعطيل الأطفال وإلغاء تحديدهم. لماذا ا ؟ في حالتي ، سأستخدم خيارًا لإنشاء مرشح تسلسل هرمي ، حيث يشير اختيار العقدة الأب إلى أن البحث في كل فئة من فئات الأطفال ، ولا نرغب في تلويث واجهة المستخدم بوضع كل الأطفال على النحو المحدد.

http://jsfiddle.net/Zardoz/pf6dhrbc/6/

لقد قمت للتو بالترقية إلى 1.8.3 من أجل الحصول على النتائج لتبقى مفتوحة بعد تحديد نتيجة على تحديد متعدد (تمت إضافته في الإصدار 1.7.0). ميزة رائعة ، سعيد لإضافتها. ومع ذلك ، كنت أستخدم 1.6.1 واستخدمت الرمز هنا للسماح بإضافة مجموعة كاملة عند النقر فوق اسم المجموعة: http://robido.com/jquery/add-selectdeselect-optgroup-click-events-harvests- المساعد المختار jquery-plugin /

كان هذا الرمز يعمل بشكل رائع ، حتى الآن. يؤدي استخدام 1.8.3 و hide_results_on_ select: false إلى كسر شيء ما ، ولا يقوم إلا بتحديد خيار النتيجة المميز حاليًا. عند إزالة هذا السطر (إعادته إلى الوضع الافتراضي ، إخفاء عند التحديد) ، فإنه يعمل بشكل جيد ويحدد خيارات نتائج المجموعة بأكملها. لذا فإن شيئًا ما في hide_results_on_ select: false هو كسر / تداخل مع القدرة على جمع كل النتائج غير المحددة ضمن نتيجة مجموعة. إن التضحية بهذه القدرة من أجل الميزة الجديدة أمر وحشي.

سأستعرض جميع التعليقات المذكورة أعلاه لمعرفة ما إذا كان قد تمت معالجة ذلك باعتباره عيبًا في الميزة الجديدة ، لكن لا يمكنني تحديد الإصدار الذي يستخدمه الأشخاص عند اختبارهم.

أيه أفكار؟

حسنا. لقد اكتفيت. "الترقية" إلى 1.8.3 لم تكن سوى لعبة ضرب الخلد الأسبوع الماضي. مشكلات css ، ومشكلات النشاط غير المتوقعة ، وما إلى ذلك. لقد قمت بالترقية لإبقاء النتائج مفتوحة على ميزة التحديد المتعدد (التي استغرق تنفيذها سنوات في المقام الأول) ، ولكن اكتشفت أنها تقفز دائمًا إلى أعلى عند الاختيار من النتائج ، فما هو الجيد هو هذا - كل ذلك ينتظر لا شيء. تباطأ الأداء في تحديد واحد مع العديد من الخيارات إلى الزحف بطريقة ما. والمزيد من القضايا التي لا يمكن إدراجها هنا. عمل جيد الحفاظ على هذا الشيء مستمرًا لسنوات عديدة ، لقد استمتعت به. لكن التحسينات جاءت على حساب تجربة المستخدم المتدهورة ولا يمكنني الحصول على ذلك. أنا أبحث في كيفية الانسحاب المختار واستخدام select2. إنه عام 2018 ، حان الوقت للعثور على أداة محددة تواكب توقعات المستخدم والتي تزداد صعوبة في تلبيتها. آسف وشكرا

لقد انتقلت إلى select2 أيضًا ، لكنني لم أحصل على تفريغ تم اختياره قبل ذلك. لديك طريقة غريبة لقول "شكرًا".

أهلا،
إذا كنت ترغب في استخدام optgroup وتكون قادرًا على النقر فوقه وإضافة جميع خيارات تلك المجموعة تلقائيًا ، فما عليك سوى إضافة هذا إلى javascript الخاص بك: (يمكن أن يكون مشغل الحدث ".group-result" أكثر تقييدًا)

أنا متأكد من أنه يمكن إضافة هذا إلى فئة AbstractChosen ، مع شيء مثل AbstractChosen.prototype.optgroup_click = function (evt) ....

$('body').on('click','.group-result',function(){
    // id of select
    var quest=$(this).parent().parent().parent().attr('id');
    quest='#'+quest.substring(0,quest.lastIndexOf('_'));
    // number of optgroup
    var total=$(quest+' optgroup').length;
    // number of group after group-result clicked
    var nb=0;
    $(this).nextAll().each(function(){
        if($(this).hasClass('group-result'))nb++;
    });
    // for clicked group-result, select options in the right select tag by position
    $(quest+' optgroup:nth-of-type('+(total-nb)+')').children().each(function(){
        $(this).prop('selected','selected');
    });
    // update chosen !
    $(quest).trigger('chosen:updated');
});

لقد استفدت من bootstrap-select وكنت أعاني أيضًا من أجل العثور على شيء ما ليتمكن من النقر فوق optgroup وتحديد جميع عناصره - لقد نجح هذا الرابط بالفعل بالنسبة لي ، وآمل أن يساعد: https://stackoverflow.com/questions/41821115 / select-deselect-optgroup-on-option-select-in-select-picker-boostrap