Chosen: html5 memerlukan dukungan atribut?

@Aharito Tidakkah kita akan mencapai masalah urutan tab dengan melakukan ini?

Terima kasih @Aharito ini berfungsi dengan baik dengan v1.1.0, ganti saja $('select.chzn') dengan $('.chosen-select') .

Saya pikir saya mencoba klip itu: trik rect, dan menemukan beberapa masalah dengannya. Mungkin dengan browser yang lebih lama? Saya kira jika itu berfungsi sekarang, itu bagus.

Saya pikir mungkin ada masalah tab dengan solusi saya juga (saya tidak ingat, sudah lama) - Saya mengurangi dampaknya dengan hanya menerapkan tambalan ke bidang yang memiliki atribut yang diperlukan.

Kami telah menstandarisasi ini di semua panggilan ke $().chosen()

$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function(options) {
  var select = $(this)
    , is_creating_chosen = !options || _.isObject(options)

  if (is_creating_chosen && select.css('position') === 'absolute') {
    // if we are creating a chosen and the select already has the appropriate styles added
    // we remove those (so that the select hasn't got a crazy width), then create the chosen
    // then we re-add them later
    select.removeAttr('style')
  }

  var ret = select.oldChosen(options)

  if (is_creating_chosen) {
    // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
    // only do this if we are initializing chosen (no params, or object params) not calling a method
    select.attr('style','display:visible; position:absolute; clip:rect(0,0,0,0)');
  }
  return ret
}

@ghiculescu Itu tidak menyelesaikan masalah tabbing atau shift-tabbing ke dalam pilih, bukan?

@DASPRiD tidak .

bagaimana dengan ini sebagai solusi penutup yang mungkin.

itu tidak sempurna, tetapi pada kenyataannya, itu menghentikan pemilihan asli agar tidak muncul dengan meneruskan fokus ke kotak dialog yang dipilih berikutnya, tetapi mungkin itu selangkah lebih dekat

"pilih-pilih" hanyalah pemilih untuk pilihan yang saya miliki dengan kelas tertentu, saya tidak yakin apakah "fokus klik" mencakup semua acara masing-masing yang harus saya kaitkan, tetapi mungkin seseorang dapat mengatakan apa lagi yang hilang?

mungkin juga saya salah memahami sesuatu tentang struktur html yang dipilih dan find("a") terlalu liberal, ada yang punya pengalaman lebih?

$(".chosen-select").on("click focus",function(event){
    $(this).next(".chosen-container").find("a").trigger(event.type);
});

oh, dan tentunya " display:visible " seharusnya " display:block " atau apa? sebab v isibility:visible valid, tapi display:visible Saya yakin tidak

apa yang saya temukan adalah bahwa jika Anda memiliki beberapa pilihan di samping satu sama lain dalam wadah yang sama, ini memindahkan semuanya ke lokasi yang salah sehingga position: absolute kemudian membuat pesan validasi muncul di posisi yang salah.

Saya memecahkan ini dengan melepaskan dan memasang kembali ke wadah yang dipilih, seperti

$(".chosen-select").each(function(){
    $(this).next(".chosen-container").prepend($(this).detach());
});

solusi di atas, setelah penyelidikan lebih lanjut, menunjukkan bahwa itu menonaktifkan tabbing melalui bidang sepenuhnya dan saya tidak dapat menyelesaikan masalah, namun itu menghilangkan masalah pilih yang muncul saat Anda melakukan tabbing, jadi itu lebih masalah penting dalam pikiran saya, saya dapat hidup tanpa tab jika saya dapat memilikinya sehingga tidak merusak tampilan, mengingat semakin banyak orang menggunakan perangkat seluler dan tidak melakukan tab, itu hanya memengaruhi pengguna desktop, tetap penting, tetapi relatif berbicara, dikelola.

namun, jika ada yang memecahkannya dengan cara tertentu, saya sangat tertarik untuk mencari tahu.

ok, jadi lebih jauh dari apa yang saya coba sebelumnya, saya menemukan acara yang dipilih menggunakan dan memutuskan bahwa ketika saya melakukan acara apa pun di pilih yang sekarang tersembunyi, saya bisa membajaknya dan memicu acara yang dipilih untuk membukanya.

saya pikir itu bekerja dengan baik.

$(".chosen-select").each(function(){
    //    take each select and put it as a child of the chosen container
    //    this mean it'll position any validation messages correctly
    $(this).next(".chosen-container").prepend($(this).detach());

    //    apply all the styles, personally, I've added this to my stylesheet
    $(this).attr("style","display:block!important; position:absolute; clip:rect(0,0,0,0)");

    //    to all of these events, trigger the chosen to open and receive focus
    $(this).on("click focus keyup",function(event){
        $(this).closest(".chosen-container").trigger("mousedown.chosen");
    });
});

Saya pikir ini adalah versi terbaik yang saya miliki sejauh ini. Untungnya ini memecahkan masalah tab maju, masih ada tab mundur, Anda tidak dapat melakukan tab mundur melalui pilihan yang dipilih karena begitu Anda memasukkan tab ke elemen pilih, Anda segera memfokuskan kembali ke wadah yang dipilih lagi, artinya Anda ' kembali terjebak menjadi hanya mampu tab ke depan.

Mungkin ide untuk melacak elemen sebelumnya dan jika elemen yang sebelumnya memiliki fokus tab berada di depan elemen fokus saat ini, Anda akan mundur, lalu lewati pemfokusan ulang dengan tepat ke yang dipilih dan pilih tab sebelumnya, tetapi saya tidak yakin bagaimana melakukannya.

Setelah membaca sangat lama, saya pikir saya mencoba saran yang diajukan selama bertahun-tahun.

Sayangnya, saya tidak bisa mendapatkan kode dari @christhomas untuk bekerja. Saya memanggilnya dalam fungsi kirim tanpa hasil yang terlihat (tidak ada kesalahan juga).

Kabar baiknya adalah fungsi baru oleh

@DASPRiD @charettes apa maksud Anda tab tidak berfungsi dengan fungsi yang dimodifikasi? Sepertinya berhasil untuk saya

Cukup mudah untuk menambahkan tabindex: -1 ke cuplikan pilih ke @ghiculescu , memecahkan masalah tab.

Contoh: http://jsfiddle.net/hq7b426j/

Saya bisa melihat masalahnya sekarang! Penambahan Anda berfungsi dengan baik @andreialecu

Omong-omong, ada satu tambahan lain yang dibutuhkan. Di iPhone, atau perangkat lain yang tidak didukung, biola tidak akan berfungsi dengan baik. Chosen menonaktifkan dirinya sendiri di iPhone dan membiarkan <select> tidak berubah, dan kode di biola di atas akan menyembunyikannya, tanpa meninggalkan cara untuk berinteraksi dengan yang dipilih.

Biola ini memperbaikinya (dengan menambahkan tampilan: tidak ada centang):
http://jsfiddle.net/hq7b426j/1/

Ah itu lebih baik!! Terima kasih! Saya masih menguji juga, tetapi saya akan memposting jika ada hal lain yang muncul

@CaptainN tolong beri tahu saya bahwa saya memiliki masalah yang sama. wr saya harus memasukkan kode itu. saya menggunakan tema inspina dari wrapbootstrap.

@vidhyaprakash85 Saya tidak yakin apa yang Anda maksud. Saya telah melakukan fork sejak lama, dan menulis permintaan tarik (#900) tetapi repo tidak sinkron sekarang, dan fork saya sangat ketinggalan zaman. Anda dapat menemukannya di sini jika itu membantu: https://github.com/adcSTUDIO/chosen

saya sudah menggunakan https://github.com/harvethq/chosen bagaimana melakukannya :(

@andreialecu kode Anda berfungsi dengan baik! Terima kasih!!!

Terima kasih @christhomas kode Anda bekerja dengan baik :dancer:

Baik @christhomas atau @ghiculescu tidak berfungsi untuk saya menggunakan pilihan multi-grup. meninggalkannya ke validasi server untuk saat ini.

Ketika saya mencoba tambalan @ghiculescu , itu berhasil kecuali gulir ditampilkan sepanjang waktu, di bawah kotak pilih.
Ketika saya mencoba tambalan @christhomas , sembulan muncul tanpa membuka kotak pencarian.

Saya harus memodifikasi skrip @ghiculescu sehingga saya dapat memanggil yang dipilih dua kali seperti itu:

target.find('select')
        .chosen('destroy')
        .chosen({disable_search_threshold: 10})

Jika tidak, perjalanan ke-2 menghapus gaya yang ditambahkan di perjalanan pertama:

$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function(options) {
  var select = $(this)
    , is_creating_chosen = !!options

    var style = 'display:visible; position:absolute; clip:rect(0,0,0,0);'

        if (is_creating_chosen && select.css('position') === 'absolute' && select.attr('style') != style) {
            // if we are creating a chosen and the select already has the appropriate styles added
            // we remove those (so that the select hasn't got a crazy width), then create the chosen
            // then we re-add them later
            select.removeAttr('style')
        }

        var ret = select.oldChosen(options)

        // only act if the select has display: none, otherwise chosen is unsupported (iPhone, etc)
        if (is_creating_chosen && select.css('display') === 'none') {
            // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
            // only do this if we are initializing chosen (no params, or object params) not calling a method
            select.attr('style', style);
            select.attr('tabindex', -1);
        }
        return ret
}

Saya baru saja menambahkan kondisi ekstra ini ke 1 jika: && select.attr('style') != style

@doganmeh Berfungsi dengan baik di Chrome dan seluler (dengan Chrome) tetapi diuji di Firefox 53.0 yang tidak berfungsi

Bahkan http://jsfiddle.net/hq7b426j/1/ ini tidak berfungsi di Firefox 53.0

Hmmm, tapi ini sepertinya lebih seperti masalah Firefox karena jika Anda mengklik tombol lebih sering, Anda akan melihat bahwa Firefox mencoba menampilkan pesan (tetapi tidak pernah ditampilkan sepenuhnya)

Saya telah menggunakan solusi ini. Ini sangat sederhana dan berfungsi sempurna:

<style>
    select.submitted:invalid + .chosen-container{
        border-color: red !important;
    }
</style>

$('#yourSelector').chosen({
                no_results_text: "yourText",
                disable_search_threshold: 9,
                search_contains: true
                //your parameters
    }).on('invalid', function(){
        $(this).addClass('submitted');
    });

sepertinya ini tidak berhasil jika Anda memilih dengan banyak pilihan:
http://jsfiddle.net/jeromax/o5a8aogh/

Aku telah memperbaikinya.

`
$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function (opsi) {
var pilih = $(ini),
is_creating_chosen = !!opsi;

if (is_creating_chosen && select.css('position') === 'absolute') {
// jika kita membuat yang dipilih dan yang dipilih sudah memiliki gaya yang sesuai ditambahkan
// kami menghapusnya (sehingga pilihannya tidak memiliki lebar gila), lalu buat yang dipilih
// lalu kita tambahkan lagi nanti
pilih.removeAttr('gaya');
}

var ret = pilih.oldChosen(opsi)

// hanya bertindak jika pilihan memiliki tampilan: tidak ada, jika tidak, pilihan tidak didukung (iPhone, dll)
if (is_creating_chosen && select.css('display') === 'none') {
// https://github.com/harvethq/chosen/issues/515#issuecomment -33214050
// lakukan ini hanya jika kita menginisialisasi yang dipilih (tidak ada params, atau params objek) tidak memanggil metode

  $(this).each(function(index){
      if($(this)[0].multiple==true){
          $(this).attr('style','display:visible; width:0px; height:0px; margin-top:25px; position:absolute; clip:rect(0,0,0,0)');
      }else{
          $(this).attr("style","display:visible; position:absolute; clip:rect(0,0,0,0)");
      }
  })

pilih.attr('tabindex', -2);

}
kembali ret
}
`

+1

Adakah yang bisa melakukan perbaikan untuk ini? Ini masalah yang cukup lama dan fungsionalitas yang sangat penting saat ini. Terima kasih.

Tidak bekerja pada versi terbaru.

Ini tampaknya melanggar validasi formulir angular.js saat menggunakan pilihan sudut juga.

Ini tahun 2018 dan kami masih memiliki masalah yang sama. Sangat disayangkan bagaimana standar HTML tidak dapat bekerja dengan baik dan terintegrasi dengan plugin eksternal. Gila kali :)

Ini juga melanggar plugin pilihan Drupal. Lihat https://www.drupal.org/project/chosen/issues/2705891

Tidak dapat menemukan solusi yang tepat untuk ini selain solusi:

<div class="form__select">
  <select class="chosen">
    <!-- options -->
  </select>
</div>

.form__select {
    position: relative;
}

.form__select .chosen {
    display: block !important;
    height: 0;

    position: absolute;
    left: 35px;
    bottom: 0;

    outline: none;
    border-color: white;

    pointer-events: none;
}

Jika Anda menggunakan Terpilih untuk semua elemen select , Anda dapat menggunakan CSS ini untuk mengubah membuatnya terlihat (ke DOM), tetapi tanpa opacity, tanpa ketinggian, posisi absolut.

Pemilih CSS ini menargetkan elemen pilihan yang tidak valid, dengan salah satunya menargetkan multiple menambahkan 15px margin-top untuk memusatkannya pada elemen pilihan ganda.

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
   margin-top: 15px !important;
}

Demo: http://jsfiddle.net/tripflex/2zdeu9oc/

TAPI BENAR-BENAR ... ini seharusnya sudah ditangani oleh lib Terpilih.JS

Inilah solusi saya, jika ada gunanya:

// Initialise Chosen
$(function () {
    $('select').chosen();
});

// Place the original input behind the Chosen input, matching the height and width so that the warning appears in the correct position
$('select').on('chosen:ready', function () {
    const height = $(this).next('.chosen-container').height();
    const width = $(this).next('.chosen-container').width();

    $(this).css({
            'position': 'absolute',
            'height': height,
            'width': width,
            'opacity': 0
        })
        .show();
});

@jonathanbull dapatkah Anda menunjukkannya dalam konteks? Saya mencoba solusi Anda dan tidak berhasil.

@AndrewSouthpaw Ini kode saya, perbaikan berfungsi dengan baik untuk saya :)

$("#select").val([]); // disable default selection by browser
$('#select').on('chosen:ready', function(evt, params, chosen) {
    $(this).css({'position': 'absolute', 'height': 0, 'opacity': 0}).show();
});
$("#select").chosen();

Saya menggunakan kode yang sedikit berbeda (berdasarkan kode di sini):

$('.chosen-select').on("chosen:ready", function (evt, data) {
  $(this)
    .addClass('chosen_hidden')
    .attr('tabindex', '-1')
    .prependTo(data.chosen.container)
    .show()
  })
  .chosen({width: '100%'})

.chosen_hidden {
  position: absolute;
  top: 0;
  bottom: 0;
  max-height: 100%; // required for IE 10
  // **not required** opacity: 0;
}

Itu tidak menangani tindakan 'hancurkan', tetapi memposisikan pesan kesalahan dengan baik dan tampaknya berfungsi di Firefox dan Chromiun. Karena pemilih asli tidak disembunyikan, batas sorotan kesalahan terlihat. Pembaruan : dengan max-height ini juga berfungsi di IE. Pembaruan lainnya : tambahkan tabindex -1 untuk memastikannya tidak menerima fokus. (sambil tetap fokus dan menerima pesan kesalahan).

Ada PR terbuka yang menyelesaikan ini, tapi saya pikir itu hilang karena utas lain yang ditargetkan ditutup. Lihat #2594

@jhedstrom akan senang melihat itu digabungkan. Tahukah Anda jika perpustakaan ini masih terawat?

Saya menggunakan sesuatu yang mirip dengan solusi @eloyesp di atas dan membagikannya di sini:

https://github.com/harvethq/chosen/pull/2594#issuecomment -714806139

Terima kasih @jhedstrom karena telah mengarahkan saya ke arah yang benar!