Chosen: html5 आवश्यक विशेषता समर्थन?

@Aharito क्या हम मारेंगे ?

धन्यवाद @Aharito यह चुने हुए v1.1.0 के साथ बहुत अच्छा काम कर रहा है, बस $('select.chzn') को $('.chosen-select') बदलें।

मैंने सोचा कि मैंने उस क्लिप की कोशिश की: रेक्ट ट्रिक, और इसके साथ कुछ समस्या मिली। शायद पुराने ब्राउज़र के साथ? मुझे लगता है कि अगर यह अब काम कर रहा है तो यह बहुत अच्छा है।

मुझे लगता है कि मेरे समाधान के साथ भी टैब समस्याएं हो सकती हैं (मुझे याद नहीं है, यह कुछ समय हो गया है) - मैंने केवल आवश्यक विशेषता वाले क्षेत्रों में पैच लागू करके प्रभाव को कम कर दिया।

हमने इसे सभी कॉलों के लिए $().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 जो टैबिंग की समस्या को चयन में हल नहीं करता है, है ना?

@DASPRiD नहीं ।

इसके बारे में एक संभावित कवर अप समाधान के रूप में क्या।

यह सही नहीं है, लेकिन वास्तव में, यह फोकस को अगले चुने हुए डायलॉग बॉक्स पर पास करके मूल चयन को प्रदर्शित होने से रोकता है, लेकिन शायद यह एक और कदम करीब है

"चुना-चयन" मेरे पास एक विशेष वर्ग के चयन के लिए सिर्फ एक चयनकर्ता है, मुझे यकीन नहीं है कि "फोकस पर क्लिक करें" में उन सभी संबंधित घटनाओं को शामिल किया गया है जिन पर मुझे हुक करना चाहिए, लेकिन शायद कोई कह सकता है कि और क्या गुम है?

यह भी संभव है कि मैंने चुने हुए एचटीएमएल संरचना के बारे में कुछ गलत समझा है और ढूंढें ("ए") बहुत उदार है, किसी के पास और अनुभव है?

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

ओह, और निश्चित रूप से " प्रदर्शन: दृश्यमान " " प्रदर्शन: ब्लॉक " या कुछ और होना चाहिए? कारण v isibility:visible मान्य है, लेकिन display:visible मुझे यकीन है कि नहीं है

मैंने जो पाया वह यह है कि यदि आपके पास एक ही कंटेनर में एक-दूसरे के बगल में एकाधिक चयन हैं, तो यह उन सभी को गलत स्थान पर विस्थापित कर देता है, इसलिए स्थिति: पूर्ण तब सत्यापन संदेश गलत स्थिति में दिखाई देता है।

मैंने इसे चुने हुए कंटेनर में अलग करके और फिर से जोड़कर हल किया, जैसे

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

उपरोक्त समाधान, अधिक जांच के बाद, दिखाता है कि यह पूरी तरह से फ़ील्ड के माध्यम से टैबिंग को अक्षम करता है और मैं समस्या को हल करने में असमर्थ हूं, हालांकि जब आप टैबिंग कर रहे हैं तो यह चुनिंदा पॉपिंग की समस्या को खत्म कर देता है, इसलिए यह अधिक है मेरे दिमाग में महत्वपूर्ण समस्या है, मैं बिना टैबिंग के रह सकता हूं अगर मेरे पास यह हो सकता है तो यह डिस्प्ले को नहीं तोड़ता है, क्योंकि अधिक लोग मोबाइल उपकरणों का उपयोग कर रहे हैं और वैसे भी टैबिंग नहीं कर रहे हैं, यह केवल डेस्कटॉप उपयोगकर्ताओं को प्रभावित करता है, फिर भी महत्वपूर्ण है, लेकिन अपेक्षाकृत बोल, प्रबंधनीय।

हालांकि, अगर कोई इसे किसी भी तरह से हल करता है, तो मुझे पता लगाने में बहुत दिलचस्पी है।

ठीक है, इससे पहले कि मैं क्या कोशिश कर रहा था, मैंने पाया कि चुनी गई घटनाओं का उपयोग कर रहा था और फैसला किया कि जब मैंने अब छिपे हुए चयन पर कोई घटना की, तो मैं इसे हाईजैक कर सकता हूं और इसे खोलने के लिए एक चुने हुए ईवेंट को ट्रिगर कर सकता हूं।

मुझे लगता है कि यह अच्छी तरह से काम करता है।

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

मुझे लगता है कि यह अब तक का सबसे अच्छा संस्करण है। खुशी से यह फॉरवर्ड-टैबिंग समस्या को हल करता है, अभी भी रिवर्स टैबबिंग है, आप किसी चुने हुए-चयन के माध्यम से पीछे की ओर टैब नहीं कर सकते हैं क्योंकि दूसरा आप चयनित तत्व में टैब करते हैं, आप तुरंत चुने हुए कंटेनर में फिर से ध्यान केंद्रित करते हैं, जिसका अर्थ है आप ' केवल आगे की ओर टैब करने में सक्षम होने के कारण फिर से फंस गए।

यह पिछले तत्व का ट्रैक रखने का एक विचार हो सकता है और यदि वह तत्व जिस पर पहले टैब फोकस था, वर्तमान केंद्रित तत्व के सामने था, तो आप पीछे की ओर जा रहे हैं, तो उचित रूप से चुने हुए पर फिर से ध्यान केंद्रित करना छोड़ दें और पिछले टैब का चयन करें, लेकिन मुझे यकीन नहीं है कि यह कैसे करें।

बहुत लंबे समय तक पढ़ने के बाद, मुझे लगा कि मैंने वर्षों से प्रस्तुत सुझावों को आजमाया है।

दुर्भाग्य से, मुझे काम करने के लिए @christhomas द्वारा कोड नहीं मिला। मैं इसे सबमिट फ़ंक्शन के भीतर कोई दृश्यमान परिणाम नहीं देता (कोई त्रुटि नहीं)।

अच्छी खबर यह है कि @ghiculescu द्वारा नया फ़ंक्शन एक इलाज की तरह काम करता है क्योंकि मैं अभी भी सीडीएन चुनी गई फ़ाइल का उपयोग कर सकता हूं और बस मेरी जेएस फ़ाइल में फ़ंक्शन का उपयोग कर सकता हूं।

@DASPReD @charettes आपका क्या मतलब है टैब संशोधित फ़ंक्शन के साथ काम नहीं करता है? ऐसा लगता है कि यह मेरे लिए काम कर रहा है

tabindex: -1 को @ghiculescu के स्निपेट में जोड़ने के लिए काफी आसान है,

उदाहरण: http://jsfiddle.net/hq7b426j/

मैं अब समस्या देख सकता था! आपका जोड़ बढ़िया काम करता है @andreialecu

वैसे एक और जोड़ की जरूरत थी। IPhone, या अन्य असमर्थित उपकरणों पर, फ़िडल ठीक से काम नहीं करेगा। चुना गया आईफोन पर खुद को अक्षम कर देता है और <select> अपरिवर्तित छोड़ देता है, और उपरोक्त पहेली में कोड इसे छुपाएगा, चयन के साथ बातचीत करने का कोई रास्ता नहीं छोड़ेगा।

यह पहेली इसे ठीक करती है (एक डिस्प्ले जोड़कर: कोई भी चेक नहीं):
http://jsfiddle.net/hq7b426j/1/

आह यह और भी अच्छा है !! धन्यवाद! मैं अभी भी परीक्षण कर रहा हूं, लेकिन अगर कुछ और आता है तो मैं पोस्ट करूंगा

@CaptainN कृपया संक्षिप्त करें मेरे पास एक ही समस्या है। मुझे वह कोड डालने की ज़रूरत है। मैं रैपबूटस्ट्रैप से इंस्पिना थीम का उपयोग कर रहा हूं।

@ विद्याप्रकाश 85 मुझे यकीन नहीं है कि आपका क्या मतलब है। मैंने बहुत पहले फोर्क किया था, और एक पुल अनुरोध (# 900) लिखा था लेकिन रेपो अब सिंक से बाहर हैं, और मेरा कांटा बहुत पुराना है। अगर यह मदद करता है तो आप इसे यहां पा सकते हैं: https://github.com/adcSTUDIO/chosen

मैं पहले से ही https://github.com/harvesthq/chosen का उपयोग कर रहा हूं कि यह कैसे करें :(

@andreialecu आपका कोड ठीक काम करता है! धन्यवाद!!!

धन्यवाद @christhomas आपके कोड ने बहुत अच्छा काम किया: नर्तक:

बहु-समूहित चयन का उपयोग करके न तो @christhomas या @ghiculescu ने मेरे लिए काम किया। इसे अभी के लिए सर्वर सत्यापन पर छोड़ दें।

जब मैंने @ghiculescu पैच की कोशिश की, तो यह काम करता था सिवाय एक स्क्रॉल को हर समय, चयन बॉक्स के नीचे प्रदर्शित किया गया था।
जब मैंने @christhomas पैच की कोशिश की तो पॉपअप बिना खोज बॉक्स खोले दिखाई दिया।

मुझे @ghiculescu की स्क्रिप्ट को संशोधित करना पड़ा ताकि मैं दो बार चुना गया कॉल कर

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

अन्यथा, दूसरी यात्रा ने उस शैली को हटा दिया जो पहले में जोड़ी गई थी:

$.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
}

मैंने अभी-अभी इस अतिरिक्त शर्त को पहली अगर: && select.attr('style') != style . में जोड़ा है

@doganmeh क्रोम और मोबाइल (क्रोम के साथ) में बहुत अच्छा काम करता है लेकिन फ़ायरफ़ॉक्स 53.0 में परीक्षण किया गया जहां यह काम नहीं करता है

यहां तक ​​कि यह http://jsfiddle.net/hq7b426j/1/ Firefox 53.0 में काम नहीं करता है

हम्म, लेकिन यह फ़ायरफ़ॉक्स समस्या की तरह लगता है क्योंकि यदि आप बटन पर अधिक बार क्लिक करते हैं, तो आप देखेंगे कि फ़ायरफ़ॉक्स संदेश प्रदर्शित करने का प्रयास करता है (लेकिन ऐसा कभी भी पूरी तरह से प्रस्तुत नहीं किया जाता है)

मैंने इस समाधान का उपयोग किया है। यह बहुत आसान है और एकदम सही काम करता है:

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

ऐसा लगता है कि यदि आपने एकाधिक चयनों के साथ चुना है तो यह काम नहीं करता है:
http://jsfiddle.net/jeromax/o5a8aog/

मैंने ठीक कर दिया।

`
$.fn.oldChosen = $.fn.chosen
$.fn.chosen = फ़ंक्शन (विकल्प) {
वर चयन = $ (यह),
is_creating_chosen = !!विकल्प;

अगर (is_creating_chosen && select.css('position') === 'पूर्ण') {
// यदि हम एक चुना हुआ बना रहे हैं और चयन में पहले से ही उपयुक्त शैलियों को जोड़ा गया है
// हम उन्हें हटा देते हैं (ताकि चयन को पागल चौड़ाई न मिले), फिर चुने हुए बनाएं
// फिर हम उन्हें बाद में फिर से जोड़ते हैं
select.removeAttr ('शैली');
}

var ret = select.oldChosen (विकल्प)

// केवल तभी कार्य करें जब चयन में प्रदर्शन हो: कोई नहीं, अन्यथा चुना गया असमर्थित है (iPhone, आदि)
अगर (is_creating_chosen && select.css('display') === 'none') {
// https://github.com/harvesthq/chosen/issues/515#issuecomment -33214050
// ऐसा केवल तभी करें जब हम चुने हुए (कोई पैराम्स, या ऑब्जेक्ट पैराम्स) को इनिशियलाइज़ नहीं कर रहे हों, किसी मेथड को कॉल न करें

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

select.attr ('टैबिंडेक्स', -2);

}
वापसी
}
`

+1

क्या कोई इसके लिए कोई फिक्स कर सकता है? यह बहुत पुराना मुद्दा है और आजकल बहुत महत्वपूर्ण कार्यक्षमता है। धन्यवाद।

नवीनतम संस्करण पर काम नहीं कर रहा।

ऐसा लगता है कि कोणीय-चुने हुए का उपयोग करते समय angular.js फॉर्म सत्यापन को तोड़ रहा है।

यह 2018 है और हम अभी भी वही समस्या कर रहे हैं। यह एक नरक है कि कैसे HTML मानक ठीक से काम नहीं कर सकते और बाहरी प्लगइन्स के साथ एकीकृत हो सकते हैं। पागल समय :)

यह ड्रूपल के चुने हुए प्लगइन को भी तोड़ रहा है। देखें https://www.drupal.org/project/chosen/issues/2705891

वर्कअराउंड के अलावा इसका कोई उचित समाधान नहीं मिला:

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

यदि आप सभी select तत्वों के लिए चुना का उपयोग कर रहे हैं, तो आप इस सीएसएस का उपयोग इसे दृश्यमान (डीओएम में) बदलने के लिए कर सकते हैं, लेकिन कोई अस्पष्टता नहीं, कोई ऊंचाई नहीं, पूर्ण स्थिति नहीं।

ये CSS चयनकर्ताओं, अवैध चयन तत्वों को लक्ष्य को निशाना बनाने उनमें से एक के साथ multiple एक जोड़ने 15px margin-top एकाधिक चयन करें तत्वों पर यह केंद्र के लिए।

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

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

डेमो: http://jsfiddle.net/tripflex/2zdeu9oc/

लेकिन वास्तव में ... इसे पहले से ही चुना द्वारा संभाला जाना चाहिए। जेएस lib

यहाँ मेरा समाधान है, अगर यह किसी काम का है:

// 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 क्या आप इसे संदर्भ में दिखा सकते हैं? मैंने आपके समाधान की कोशिश की और यह काम नहीं किया।

@AndrewSouthpaw यह मेरा कोड है, फिक्स मेरे लिए ठीक काम करता है :)

$("#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();

मैं थोड़ा अलग कोड का उपयोग कर रहा हूं (यहां कोड के आधार पर):

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

यह 'नष्ट' क्रिया को संभाल नहीं पाता है, लेकिन यह त्रुटि संदेश को अच्छी तरह से स्थिति में रखता है और फ़ायरफ़ॉक्स और क्रोमियन पर काम करता प्रतीत होता है। चूंकि मूल चयनकर्ता छिपा नहीं है, त्रुटि हाइलाइट बॉर्डर दिखाई देता है। अपडेट : max-height यह IE पर भी काम करता है। अन्य अपडेट : यह सुनिश्चित करने के लिए टैबिंडेक्स -1 जोड़ें कि यह फोकस प्राप्त नहीं करता है। (जबकि अभी भी फोकस करने योग्य है और त्रुटि संदेश प्राप्त करते हैं)।

एक खुला पीआर रहा है जो इसे हल करता है, लेकिन मुझे लगता है कि यह खो गया है क्योंकि इसके द्वारा लक्षित दूसरे धागे को बंद कर दिया गया था। देखें #2594

@jhedstrom उस विलय को देखना पसंद करेंगे। क्या आप जानते हैं कि क्या यह पुस्तकालय अभी भी कायम है?

मैंने उपरोक्त @eloyesp के समाधान के समान कुछ उपयोग किया और यहां साझा किया:

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

धन्यवाद @jhedstrom मुझे सही दिशा में इंगित करने के लिए!