Chosen: Tetap buka di multi pilih

Pilihan akan tetap terbuka jika Anda menahan CMD atau CTRL saat memilih opsi. Saat ini tidak ada opsi untuk menyimpan opsi pilih secara default.

Bisakah ini diimplementasikan entah bagaimana?

Bisakah Anda memberi contoh dalam hal apa ini akan berguna?

Dalam aplikasi saya, saya memiliki formulir pencarian di mana pengguna dapat memilih beberapa kelompok usia dari widget multi-pilihan Terpilih. menjengkelkan bahwa menu ditutup selama sepersekian detik kemudian dibuka kembali (karena fokus memicu acara terbuka).

+1

+1 - Untuk satu-satunya alasan kami menggunakan Terpilih sebagai mekanisme pemfilteran di mana pengguna akhir kemungkinan besar akan memfilter menurut beberapa item per kategori. Implementasi saat ini berarti kita harus menyertakan baris teks pembantu yang menjelaskan cara menjaga kotak tetap terbuka alih-alih hanya mengatur opsi dan membiarkannya tetap terbuka selama mereka membutuhkannya.

Benar-benar +1!! Ada banyak kasus penggunaan di mana pilih harus tetap terbuka untuk dapat memilih beberapa opsi. Faktanya, saya pikir jumlah kasus penggunaan yang akan mendapat manfaat dari pilihan tetap terbuka melebihi jumlah kasus di mana pilihan harus ditutup setelah memilih hanya satu opsi. Dari sudut pandang itu, itu bahkan harus menjadi perilaku default untuk membuatnya tetap terbuka. Itu tidak dinamai "pilih-banyak" tanpa alasan ;-) Tetapi opsi konfigurasi untuk dapat membuatnya tetap terbuka akan cukup baik, dan saya harap itu akan segera diimplementasikan.

Halo,

Adakah yang menemukan cara untuk menyelesaikan ini?

Ketika saya mencoba yang berikut ini juga tidak berfungsi, itu tidak memicu acara terbuka:

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

Tuan Alexander

+1 per @geebru dan @silkfire

Ini mungkin titik sakit # 1 bagi orang-orang yang menggunakan kontrol yang dipilih dalam beberapa mode - terutama ketika ada lebih dari 2-3 item yang harus dipilih. Berharap untuk melihat ini ditambahkan. Terima kasih.

+1 untuk fitur seperti itu. sementara itu saya menggunakan 'retas' berikut untuk membuatnya berfungsi untuk pilihan dengan banyak atribut:

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

banyak :+1:

Retasan di atas tidak berfungsi. Sepertinya result_select adalah undefined .
$("#inputField").chosen().result_select;
Baik v1.1.0 dan v1.0.0 .

Maaf, kode yang benar adalah:
$("#inputField").chosen().data("chosen").result_select

Terima kasih! Ini bekerja dengan baik. Saya akhirnya berakhir dengan kode ini:

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

Saya memiliki halaman dinamis yang menghasilkan beberapa kotak pilih berdasarkan input pengguna. Kode di atas dari Jarnoleconte berfungsi dengan baik, kecuali jika ada pilihan kosong, yang menghasilkan pesan kesalahan di konsol:

TypeError Tidak Tertangkap: Tidak dapat membaca properti 'result_select' dari myfile.php yang tidak ditentukan

Untuk saat ini saya telah menyertakan ini dalam pernyataan 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);
  };
}

jadi sementara ini adalah solusi yang baik untuk saat ini, saya juga "+1" karena memiliki ini sebagai opsi, sesuatu di sepanjang baris selected:stay_open , dan tombol 'tutup' ditambahkan ke dropdown.

Kode ini jelas tidak akan berfungsi jika tidak ada kotak pilih. Kode yang saya posting disederhanakan untuk memahaminya dengan lebih mudah. Setiap orang harus merasa bebas untuk mengintegrasikannya sesuka mereka di perpustakaan mereka, misalnya membuat pembungkus atau semacamnya.

Bagi yang mungkin tertarik, saya juga ingin tetap menyaring / mencari input teks, jadi saya menambahkan beberapa baris ke kode ellekz. Tampaknya bekerja dengan baik pada 1.2 yang dipilih. Karena saya tidak tahu kode yang dipilih sama sekali, jangan ragu untuk memberi tahu saya jika ada yang salah.

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

Itu bekerja sangat baik. Terima kasih @ronanquillevere :white_check_mark:

+1

Thanx untuk peretasannya, itu memang berhasil. Saya hanya menghapus this.winnow_results(); panggilan untuk menghindari menyorot opsi aktif terdekat. Sekarang terlihat lebih... tenang :-)

Akan lebih baik untuk dapat membatalkan pilihan langsung dari daftar. Saat ini mereka hanya berwarna abu-abu dan hanya dapat dihapus dengan tombol X.

+1

+1

+1, ini cukup diperlukan untuk drop-down multi-pilihan.

Apakah ada cara untuk memperbaiki fungsi yang diposting @ronanquillevere ketika ada beberapa elemen multi-pilih pada satu halaman?

+1

+1

+1, alasan utama untuk memilih mutli adalah untuk dapat memilih opsi mutliple. Dipilih harus mendukung melakukan ini dengan cepat tanpa harus membuka kembali menu pilih untuk setiap opsi. Ini terutama akan membantu dengan daftar panjang di mana pengguna mungkin harus menggulir untuk menemukan opsi yang diinginkan.

Ini telah dibuka sejak 2013, jadi saya memutuskan untuk menggunakan Select2 saja.

+1

Bagi mereka yang menggunakan pilihan sudut, cukup tempatkan kode @ronanquillevere dalam fungsi initOrUpdate dalam arahan pilihan sudut (Anda harus mendapatkan kode sumber alih-alih menggunakan bower/npm).

Inilah yang saya lakukan:

             (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 - hanya logis bahwa pilihan ganda dengan probabilitas tinggi dari pilihan ganda akan mengharapkan kotak tidak ditutup. CMD/ctrl+click adalah fitur yang bagus, tapi itu bukan UX yang bagus.

+1 - Kami baru-baru ini mengganti multi-pilihan lama dengan Terpilih dan salah satu keluhan utama yang kami dapatkan dari pengguna kami adalah dibutuhkan lebih banyak klik untuk memilih beberapa item dalam daftar karena tarik-turun ditutup setiap saat. Seperti yang lain, kami akan menambahkan peretasan sehingga tetap terbuka secara default untuk multi-pilih. Akan sangat menyenangkan jika itu adalah salah satu pilihan.

+1

+1

+1 ini adalah fitur vital. ada yang mau bantu ngerjain PR?

+1

Hai guys, ada perkiraan kapan akan ada rilis yang tepat yang berisi itu? atau apakah saya melewatkan sesuatu?

Sepertinya fitur yang sangat dibutuhkan ini telah di master selama 3 bulan sekarang.

Bagaimana dengan rilis baru? :) :)

Hai, saya mencoba menyimpan beberapa pilihan yang dipilih oleh pengguna setelah penyegaran halaman/setelah halaman dirender.
Saya memilih 5 beberapa Distrik (item) dan kata kunci utama untuk pencarian. Seringkali saya ingin mencari dengan kata kunci yang berbeda dalam beberapa pilihan yang sama. Sangat tidak ramah pengguna jika pengguna perlu mengulang beberapa pilihan. Saya menggunakan lib Jq Terpilih. Bantuan apa pun akan dihargai. ---Datta

@DATTAU itu akan sama seperti yang Anda lakukan dengan pemilihan formulir biasa.

koenpunt, bisa dijelaskan? Silahkan!

Solusi jika Anda harus tetap membukanya sepenuhnya.
Dalam onload, panggil ini untuk firstopen
$("#" + selectId).trigger("chosen:open");

Di selected.jquery.js ada fungsi:
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; };

ganti dengan:
Chosen.prototype.results_hide = function() { return false; };

saya melakukannya seperti ini, cari metode ini
Chosen.prototype.result_select
tambahkan kondisi lain

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

Saya tidak yakin apakah itu bug atau dibuat seperti ini. Saya memiliki 18 item dalam multiselect dengan "Ctrl" tetapi ketika saya mencoba untuk memilih elemen ke-15 dalam daftar, itu bergulir secara otomatis ke item pertama yang tidak dipilih. Apakah ada sakelar untuk menjaga jendela terbuka di posisi terakhir?

Saya telah menggunakan peretasan HarrisRobin dan berfungsi dengan baik dengan pilihan pertama. Saya telah menggunakan beberapa nomor kotak pilih menggunakan yang dipilih tetapi peretasan ini tidak berfungsi dengan kotak pilih lainnya daripada yang pertama. Adakah yang bisa membantu saya?

Saya telah menguji cuplikan kode pada halaman ini dan mereka tampaknya mengatur ulang teks default ke "Pilih Beberapa Opsi", mereka juga tidak berfungsi dengan beberapa pilihan ganda pada halaman yang sama. Ini akan menjadi fitur yang bagus untuk dimiliki sehingga kami tidak perlu menginstruksikan pengguna kami untuk menahan tombol pengubah.

Halo semua,

Apakah fitur ini sudah diterapkan sekarang di tahun 2019? :)