Chosen: Jadikan label optgroup dapat diklik

Ini akan berguna, tetapi html-select standar tidak mengizinkannya.

@Fr3nzzy : ya, tetapi jika itu opsional, ini tidak akan menjadi masalah, bukan?

@Fr3nzzy : jika boleh, html-select standar juga tidak memungkinkan untuk mencari ... Saya kira kita bisa menerapkan alasan yang sama di sini.

@greg0ire : +1, saya juga mencari ini :o)

@pilap82 Namun, pilih mendukung menemukan item dengan mengetikkan namanya.

cukup adil :)

Mungkin bukan tempat terbaik untuk tambalan, tapi saya harap ini bisa membantu:

$( '.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' } );

Ini adalah ide bagus. Saya bersedia mengajukan permintaan tarik jika tim inti bersedia untuk menggabungkannya. Bagaimana menurut Anda @pfiller?

sampel batch pilih dengan yang dipilih:

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

Sudah selesai dilakukan dengan baik!

Saya ingin melihat ini ditambahkan ke Terpilih, tetapi mendengarkan acara harus ditambahkan dengan cara yang kurang intensif. Solusi @adriengibrat menerapkan pendengar ke setiap grup yang tidak berkinerja baik jika ada ratusan grup. Kami sudah memiliki acara klik pada div hasil pencarian yang dapat diuji terhadap grup opsi. Jika opsi diatur, css harus digunakan untuk mengubah warna latar belakang.

+1. Saya berpikir bahwa ketika optgroup dipilih, itu akan (opsional) menonaktifkan/menyembunyikan semua anaknya.

+1 untuk fitur ini

@pfiller ada pembaruan pada ini atau cabang search_improvements? Akan senang melihatnya bergabung menjadi master.

Saya perlu grup yang dapat dipilih juga. Saya awalnya mencoba mengubah kode - kemudian terinspirasi oleh jawaban yang sering ditawarkan untuk "lewati optgroup dan tambahkan spasi untuk membuat indentasi sub-item". Itu tampak mengerikan tetapi karena Terpilih ditata dengan baik oleh CSS ... bagaimana kalau menggunakan pilih non-optgroup dan gunakan kelas pada setiap opsi agar terlihat seperti tampilan yang dikelompokkan?

Anda dapat melihat versi dasar di biola ini: http://jsfiddle.net/slothbear/9xqpF/

Saya tidak menghabiskan banyak waktu untuk gaya, tetapi Anda akan mendapatkan idenya. Ini menyediakan dua fitur yang saya butuhkan – optgroups yang dapat dipilih, dan optgroups yang dapat dicari. Semua tanpa optgroups.

Saya hampir bergerak maju dengan teknik ini pada proyek saya, tetapi saya mencari umpan balik. Tampaknya bekerja. Bisakah Anda memikirkan cara yang lebih baik? Atau ada gotcha?

_Baru menyadari saya mungkin harus menyebutkan – biola itu menggunakan garpu Koenpunt dari Chosen, untuk mengaktifkan penambahan opsi. Tapi saya rasa itu tidak mempengaruhi contoh ini._

_Saya juga mencari bimbingan. Saya tahu teknik ini mungkin cukup jauh dari Filosofi Terpilih untuk tetap dekat dengan fitur select – tetapi jika opsi sesuai untuk fitur ini, saya akan dengan senang hati melakukannya._

+1 untuk fitur ini, saya temukan dipilih sambil mencari cara untuk mendukung ini

(Saya sedang mencari untuk dapat memilih judul grup ATAU memilih item grup) sesuai dengan Slothbear di atas

Sunting: Pada akhirnya saya meniru ini dengan melakukan hal berikut.
Perhatikan kelasnya, saya juga menambahkan .clickable ke css yang mengatur kursor ke pointer.

<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>

Inilah solusi saya. Meskipun, ini khusus untuk kebutuhan saya, seseorang dapat dengan mudah mengubahnya dan mengubahnya sesuai kebutuhannya.

Contoh:
mobil
-mobil1
-mobil2
-mobil3
pesawat
-pesawat1
-pesawat2

Apa yang saya lakukan adalah membuat opsi baru di awal semua grup, dengan begitu, opsi 'Semua' akan muncul tepat setelah grup:
mobil
-Semua mobil
-mobil1
-mobil2
-mobil3
rakyat
-Semua orang
-orang1
-orang2

Di 'results_option_build' , berikan opsi 'Semua' ke 'result_add_group' sebagai parameter kedua saat data adalah grup, dan lewati opsi 'Semua' di iterasi berikutnya:

jika (data.grup) {
konten += this.result_add_group(data, _ref[++_i])

Sekarang, mari kita pergi ke 'result_add_group' dan mengganti grup dengan opsi yang kita lewati, tetapi tetap mempertahankan gaya grup:
result_add_group = fungsi(grup, opsi) {
.
.
kembali "

Itu saja.. Jika mau, ubah kursor menjadi pointer di css.

Tak satu pun dari ini tampaknya memperhitungkan kemampuan pencarian. Secara default yang dipilih, jika Anda mencari opsi, itu akan menampilkan label grup juga. Metode ini tidak, jika saya memiliki beberapa grup dan mereka memiliki opsi yang identik, ini akan membuatnya jadi saya hanya berakhir dengan daftar item yang identik secara visual.

Akan sangat menarik untuk diintegrasikan sebagai pilihan di perpustakaan, karena akan memudahkan pengelolaan multiple select. Apakah Anda telah merujuk memeras dalam beberapa versi? Salam

Saya telah menerapkan ini hanya menggunakan javascript, ini adalah perbaikan sementara. Saya tidak menggunakannya untuk banyak pilihan, saya menggunakannya untuk pengelompokan khusus. Saya akhirnya membuat grup menjadi opsi tetapi terlihat seperti grup, dan memberikan kata kunci 'grup' bahwa ketika Anda melakukan pencarian untuk sub-opsi, grup akan ditampilkan seperti biasanya di selected.js http://stackoverflow. com/q/22336052/744228

Saya menambahkan ini ke salinan lokal pilihan saya karena itu adalah persyaratan untuk proyek saya. Itu cukup mudah pada akhirnya.

Dalam fungsi set_default_values saya meletakkan this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false; di akhir.

Kemudian di result_add_group saya mengubah kelas yang ditugaskan ke grup menjadi

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);

Dan terakhir namun tidak kalah pentingnya dalam result_select sedikit retas dan menambahkan

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);
          });
        }

sebelum
item = this.results_data[high[0].getAttribute("data-option-array-index")];

Lihat kode lengkapnya di 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);
}

Agak terlambat ke pesta, tetapi: +1 untuk fitur ini!

@ruhley +1 untuk solusi Anda, bekerja seperti pesona!
Hanya detail kecil yang ada di halaman kode lengkap tetapi tidak di segmen kode: ada
lain{
hilang di akhir.

Hai,
Terima kasih @ruhley atas kode Anda.
Tetapi dengan modifikasi Anda, grup tidak dinonaktifkan setelah diklik dan dapat dipilih kembali.

Berikut adalah peningkatan saya (berdasarkan 1.4.2) yang dipilih:

• Setelah baris 158, dalam fungsi "set_default_values", tambahkan:

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

_Penambahan parameter_

• Ubah baris 222, dalam fungsi "results_option_build", dengan:

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

_Berikan anak-anak ke fungsi "result_add_group"._

• Ubah baris 272, redefinisi fungsi "result_add_group", dengan:

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

_Untuk menerima anak-anak_

• Setelah baris 285 ( group_el = document.createElement("li"); ), dalam fungsi "result_add_group", tambahkan:

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);

_Ini membuat grup dapat diklik jika setidaknya satu anak tidak dipilih. (bagian ini tidak dapat diperbaiki karena variabel "semua")._

• Setelah baris 1052 ( high.addClass("result-selected"); ), dalam fungsi "result_select", tambahkan:

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 {

_Ini hanya menambahkan anak-anak yang tidak dipilih._

• Setelah Baris 1083, dalam fungsi "result_select":

}

_Perlu menutup kondisi grup yang diklik._

Jangan lupa untuk membuat indentasi dengan benar potongan kode itu ;)

Ini adalah versi lengkap dari file saya: https://Gist.github.com/GuillaumeSTEIN/7a4ece3c6bb487d16df0
Inilah perbedaannya (tersedia 1 tahun): https://www.diffnow.com/?report=8zhe9
Selamat bersenang-senang

Apakah ini masih belum dilaksanakan?

@GuillaumeSTEIN Saya mencoba skrip versi lengkap Anda, sepertinya tidak ada yang berubah.
Apakah saya perlu menambahkan beberapa parameter atau kelas khusus ke HTML agar berfungsi?
Mungkin Anda bisa membuat contoh kerja di http://codepen.io/ atau jsfiddle?

Ya, Anda perlu mengatur opsi : group_selectable menjadi true untuk mengaktifkan fitur ini

terima kasih @GuillaumeSTEIN , itu berhasil, tetapi yang saya lewatkan dari skrip @adriengibrat , adalah menyoroti semua opsi di bawah grup saat ini.

grup yang dipilih memiliki kelas "hasil-dipilih".
Anda dapat melakukan beberapa CSS. Inilah yang saya tulis, Anda mungkin perlu menyesuaikannya dengan kebutuhan Anda:

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

Saya menusuknya #2678

Ini akan menjadi fitur yang sangat berguna! Saya akan senang melihatnya diimplementasikan!

+1 untuk fitur ini.

Jika seseorang menganggap ini berguna, saya mengambil @slothbear jsfiddle dan memperbaikinya dengan:

• Tombol "Hapus semua"
• Memilih item kategori root menonaktifkan dan membatalkan pilihan anak-anak. Mengapa ? Dalam kasus saya, saya akan menggunakan yang dipilih untuk menghasilkan filter hierarki, di mana memilih simpul ayah berimplikasi yang akan mencari di setiap kategori anak, dan kami tidak ingin mencemari UI dengan menempatkan setiap anak sebagai yang dipilih.

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

Saya baru saja memutakhirkan ke 1.8.3 yang dipilih untuk mendapatkan hasil agar tetap terbuka setelah memilih hasil pada beberapa pilihan (ditambahkan dalam versi 1.7.0). Fitur hebat, senang telah ditambahkan. Namun, saya telah menggunakan 1.6.1 dan menggunakan kode di sini untuk memungkinkan seluruh grup ditambahkan saat mengklik nama grup: http://robido.com/jquery/add-selectdeselect-optgroup-click-events-harvests- dipilih-jquery-plugin/

Kode itu telah berfungsi dengan baik, sampai sekarang. Menggunakan 1.8.3 dan hide_results_on_ select:false menyebabkan sesuatu rusak, dan itu hanya memilih opsi hasil yang disorot saat ini. Ketika baris itu dihapus (mengaturnya kembali ke default true, sembunyikan saat dipilih), itu berfungsi dengan baik dan memilih seluruh opsi hasil grup. Jadi sesuatu di hide_results_on_ select:false melanggar/mengganggu kemampuan untuk mengumpulkan semua yang tidak .result-selected di bawah .group-result. Mengorbankan kemampuan ini untuk fitur baru itu brutal.

Saya akan memeriksa semua komentar di atas untuk melihat apakah ini telah diatasi sebagai kelemahan fitur baru, tetapi saya tidak tahu versi mana yang digunakan orang saat mereka menguji ini.

Ada ide?

baik. saya sudah cukup. "meningkatkan" ke 1.8.3 hanyalah permainan mendera tahi lalat selama seminggu terakhir. masalah css, masalah aktivitas tak terduga, dll. Saya memutakhirkan untuk membuat hasil tetap terbuka pada fitur multi pilih (yang membutuhkan waktu bertahun-tahun untuk diterapkan), tetapi ternyata selalu melompat kembali ke atas ketika memilih dari hasil, jadi apa bagusnya adalah bahwa - semua itu menunggu apa-apa. kinerja pada satu pilihan dengan banyak opsi telah melambat entah bagaimana. dan lebih banyak masalah terlalu banyak untuk dicantumkan di sini. pekerjaan bagus menjaga hal ini selama bertahun-tahun, saya menikmatinya. tetapi peningkatan datang dengan biaya yang menurunkan pengalaman pengguna dan saya tidak dapat memilikinya. sedang meneliti cara menarik keluar yang dipilih dan menggunakan pilih2. ini tahun 2018, saatnya untuk menemukan alat pilihan yang sesuai dengan harapan pengguna yang semakin sulit untuk dipenuhi. maaf dan terima kasih

Saya telah pindah ke select2 juga, tetapi saya tidak mengambil keputusan yang dipilih sebelumnya. Anda memiliki cara yang aneh untuk mengatakan "terima kasih".

Halo,
Jika Anda ingin menggunakan optgroup dan dapat mengkliknya dan secara otomatis menambahkan semua opsi grup itu, cukup tambahkan ini ke javascript Anda: (pemicu acara ".group-result" bisa lebih membatasi)

Saya yakin ini dapat ditambahkan ke kelas AbstractChosen, dengan sesuatu seperti 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');
});

Saya menggunakan bootstrap-select dan juga berjuang untuk menemukan sesuatu untuk dapat mengklik optgroup dan memilih semua itemnya - Tautan ini benar-benar berfungsi untuk saya, semoga membantu: https://stackoverflow.com/questions/41821115 /select-deselect-optgroup-based-on-option-select-in-select-picker-boostrap