JQuery UI स्वत: पूर्ण हेल्पर पाठ को कैसे निकालें / बदलें?

Question

ऐसा लगता है कि यह JQuery UI 1.9.0 में एक नई सुविधा है, क्योंकि मैंने JQuery UI का पहले कई बार उपयोग किया था और यह पाठ कभी भी पॉप-अप नहीं हुआ।

एपीआई प्रलेखन से संबंधित कुछ भी नहीं मिला।

इसलिए स्थानीय स्रोत के साथ एक मूल स्वत: पूर्ण उदाहरण का उपयोग करना

$( "#find-subj" ).autocomplete({
    source: availableTags
});

जब खोज मेल खाती है, तो यह संबंधित सहायक पाठ दिखाता है:

'1 परिणाम उपलब्ध है, नेविगेट करने के लिए ऊपर और नीचे तीर कुंजियों का उपयोग करें।'

मैं इसे एक अच्छे तरीके से कैसे अक्षम कर सकता हूं, इसे JQuery के चयनकर्ताओं के साथ हटाने से नहीं।

Comments

आप इसे किस ब्राउज़र में देख रहे हैं? क्या आप jquery ui वेबसाइट में एक ही संवाद देख पा रहे हैं

— fuzionpro

मैंने इसे कभी नहीं देखा है, क्या आप संभवतः एक फ़िडलर या कुछ अतिरिक्त कोड प्रदान कर सकते हैं ताकि हम इसे और अधिक देख सकें?

— 12

मेरे लिए मुद्दा यह था कि स्थिति: सापेक्ष, उस अवधि के लिए ओवरराइड की जा रही थी जिस पर एक्सेसिबिलिटी सामान प्रदर्शित हो रहा था ... बस "महत्वपूर्ण" जोड़ा गया था और अब मैं एक्सेसिबिलिटी रख सकता हूं

— iKode

आपके संदेह ने मेरा समय बचाया। इसलिए +1 आप को :-)

— अशोक कुमार

Answer 1

मैं जानता हूं कि यह लागू नहीं किया गया है लेकिन सिर्फ एक कार्यान्वयन उदाहरण देना चाहते हैं:

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++"
    ];

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});

Comments

मैंने यह कोशिश की और यह स्ट्रिंग "नल" को उसी स्थान पर रखता है। समाधान को बदलना है: noResults: '', और आपको कोई संदेश नहीं मिलेगा।

— पैट्रिक

मेरे लिए noResults: '' के साथ काम किया। आश्चर्य है कि इसे api.jqueryui.com पर क्यों नहीं प्रलेखित किया गया है

— नील्स स्टीनबीक

यकीन नहीं होता कि क्या source: availableTagsकरता है? मैंने इसे हटा दिया और मेरे पास अभी भी कोई संदेश नहीं था।

— चक ले बट

@ डिंगो रेनहार्ड्ट जो ओपी के प्रश्न में उदाहरण से कॉपी किया गया था। स्रोत परिभाषित करता है कि स्वत: पूर्ण डेटा कहां से आ रहा है। उदाहरण के लिए, availableTagsशब्द मानचित्रण के लिए यूआरएल का JSON ऑब्जेक्ट युक्त एक स्थानीय चर हो सकता है, [{ '/tag/cats': 'Cats', etc... }]इसलिए जब उपयोगकर्ता प्रकार Caकैट ड्रॉपडाउन में दिखाई देगा और जब चयनित या क्लिक किया जाता है तो यह उदाहरण के लिए url के साथ एक छिपे हुए क्षेत्र को पॉप्युलेट कर सकता है।

— TK123

बहुत बहुत धन्यवाद। यह एपीआई प्रलेखन में नहीं मिल सका।

— १or:०५ पर चोरिनर सेप

Answer 2

यह एक्सेसिबिलिटी के लिए उपयोग किया जाता है, सीएसएस के साथ इसे छिपाने का एक आसान तरीका है:

.ui-helper-hidden-accessible { display:none; }

या (डैनियल की टिप्पणी को देखें)

.ui-helper-hidden-accessible { position: absolute; left:-999em; }

Comments

जैसा कि आपने कहा, यह उपयोग के लिए उपयोग किया जाता है ताकि स्क्रीन रीडर वाले लोग विजेट को बेहतर ढंग से समझ सकें। प्रदर्शन का उपयोग करके: कोई नहीं; आप इसे स्क्रीन पाठकों से भी छिपाते हैं। स्थिति के साथ स्क्रीन को स्थानांतरित करने के लिए बेहतर है: फोलेट; छोड़ दिया: -999em;

— डैनियल गॉरेनसन

इसके बजाय left: -9999px, आप भी उपयोग कर सकते हैं left: 200%(200% बनाम 100% सिर्फ खाते में किसी भी संभावित ब्राउज़र quirks जहां 100% नहीं है के लिए काफी स्क्रीन बंद इसे पाने के)।

— jbyrd

Answer 3

यहां शीर्ष उत्तर वांछित दृश्य प्रभाव को प्राप्त करता है, लेकिन ARIA समर्थन वाले jQuery की वस्तु को हरा देता है, और उन उपयोगकर्ताओं के लिए थोड़ा सा है जो इस पर भरोसा करते हैं! जिन लोगों ने उल्लेख किया है कि jQuery CSS आपके लिए यह छुपाता है कि वे सही हैं, और यह वह शैली है जो ऐसा करती है:

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

संदेश हटाने के बजाय अपनी स्टाइलशीट में कॉपी करें, कृपया :)।

Comments

2019 अपडेट: clipसंपत्ति का उपयोग न करें , क्योंकि अब यह पदावनत हो गया है - डेवलपर

— pmozilla.org/en-US/docs/Web/CSS/clip

Answer 4

इस ब्लॉग के अनुसार :

जब परिणाम उपलब्ध होते हैं और सुझावों की सूची के माध्यम से नेविगेट करने की घोषणा करने के लिए अब हम ARIA लाइव क्षेत्रों का उपयोग करते हैं। घोषणाओं को संदेश विकल्प के माध्यम से कॉन्फ़िगर किया जा सकता है, जिसमें दो गुण हैं: noResults जब कोई आइटम वापस नहीं किए जाते हैं और कम से कम एक आइटम वापस किए जाने पर परिणाम होते हैं। सामान्य तौर पर, आपको केवल इन विकल्पों को बदलने की आवश्यकता होगी यदि आप चाहते हैं कि स्ट्रिंग को एक अलग भाषा में लिखा जाए। संदेश विकल्प भविष्य के संस्करणों में परिवर्तन के अधीन है जबकि हम सभी प्लगइन्स में स्ट्रिंग हेरफेर और अंतर्राष्ट्रीयकरण के पूर्ण समाधान पर काम करते हैं। यदि आप संदेशों के विकल्प में रुचि रखते हैं, तो हम आपको स्रोत पढ़ने के लिए प्रोत्साहित करते हैं; प्रासंगिक कोड स्वतः पूर्ण प्लगइन के बहुत नीचे है और केवल कुछ पंक्तियाँ हैं।

...

तो यह स्वत: पूर्ण विजेट पर कैसे लागू होता है? ठीक है, अब जब आप किसी आइटम को खोजते हैं, तो यदि आपके पास एक स्क्रीन रीडर स्थापित है, तो यह आपको कुछ पढ़ेगा जैसे "1 परिणाम उपलब्ध है, नेविगेट करने के लिए ऊपर और नीचे तीर कुंजियों का उपयोग करें।" बहुत अच्छा, हुह?

इसलिए यदि आप जीथब पर जाते हैं और स्वत: पूर्ण स्रोत कोड देखते हैं, तो रेखा 571 के आसपास आप देखेंगे कि यह वास्तव में कहां लागू किया गया है।

Answer 5

Jquery css को जोड़ने से निर्देशात्मक पाठ को हटाने का भी काम किया।

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />

Comments

मेरे लिए भी काम किया।

— इंडिका के

Answer 6

चूंकि यह एक्सेसिबिलिटी कारणों के लिए है, इसलिए सीएसएस के साथ इसे छिपाना सबसे अच्छा है।

हालाँकि, मैं सुझाव दूंगा:

.ui-helper-hidden-accessible { position: absolute; left: -9999px; }

बजाय:

.ui-helper-hidden-accessible { display:none; }

जैसा कि पूर्व आइटम ऑफ-स्क्रीन को छिपाएगा, लेकिन फिर भी स्क्रीन-पाठकों को इसे पढ़ने की अनुमति देगा, जबकि display:noneऐसा नहीं करता है।

Comments

इसके बजाय left: -9999px, बस उपयोग करें left: 200%(200% बनाम 100% सिर्फ किसी भी संभावित ब्राउज़र quirks के लिए खाते में जहां 100% काफी इसे स्क्रीन से नहीं मिलता है)।

— jbyrd

Answer 7

ठीक है, यह सवाल थोड़ा पुराना है, लेकिन जब आप सीएसएस फ़ाइल को शामिल करते हैं तो पाठ बिल्कुल दिखाई नहीं देता है:

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />

बेशक आपको YOUR_THEME_HERE"चिकनाई" के बजाय एक वास्तविक विषय डालना होगा

Answer 8

इसे स्टाइल करें कि jQuery थीम खुद को कैसे स्टाइल करती है। कई अन्य उत्तर पूरे स्टाइलशीट सहित सुझाव देते हैं, लेकिन यदि आप प्रासंगिक सीएसएस चाहते हैं, तो यह इस प्रकार है http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css:

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px);
}

Answer 9

आपकी स्क्रिप्ट में स्वत: पूर्ण होने के ठीक बाद इस कोड को जोड़ने से पेज से नाराज सहायक को धक्का लगेगा, लेकिन स्क्रीन रीडर का उपयोग करने वाले लोग अभी भी इससे लाभान्वित होंगे:

$(document).ready(function() { //pushing the autocomplete helper out of the visible page
    $(".ui-helper-hidden-accessible").css({"position": "absolute", "left":"-999em"}) //{"display","none"} will remove the element from the page
});

मैं जेएस के साथ सीएसएस में हेरफेर करने का प्रशंसक नहीं हूं, लेकिन इस मामले में मुझे लगता है कि यह समझ में आता है। जेएस कोड ने पहली जगह में समस्या पैदा की, और समस्या एक ही फ़ाइल में नीचे कुछ लाइनों को हल करेगी। IMO यह एक अलग सीएसएस फ़ाइल में समस्या को हल करने से बेहतर है जिसे अन्य लोगों द्वारा संपादित किया जा सकता है जो नहीं जानते कि क्यों .यूआई-हेल्पर-छिपे-सुलभ वर्ग को इस तरह से संशोधित किया गया था।

Comments

मैं हमेशा के लिए इस समस्या को हल करने की कोशिश कर रहा हूं और आपके समाधान ने काम किया है।

— टिमोथी जी।

इसके बजाय left: -9999px, बस उपयोग करें left: 200%(200% बनाम 100% सिर्फ किसी भी संभावित ब्राउज़र quirks के लिए खाते में जहां 100% काफी इसे स्क्रीन से नहीं मिलता है)।

— jbyrd

Answer 10

JQuery CSS -ui-helper-hidden-पहुँचा थीम / बेस / core.css फ़ाइल में है। आगे की अनुकूलता के लिए आपको इस फ़ाइल को (न्यूनतम पर) अपनी शैलियों में शामिल करना चाहिए।