Chosen: दूरस्थ डेटा स्रोत से प्राप्त करें

यह थोड़ा बेहतर है तो jQuery ऑटो पूर्ण है ना? मैं अंततः दूरस्थ डेटा स्रोत देखना चाहता हूं (खोज परिणामों के लिए कॉलबैक प्रदान करने की क्षमता)

मैं इस अनुरोध को तीसरा करता हूं। यह jQuery UI स्वत: पूर्ण सुविधा की तरह एक दूरस्थ स्रोत निर्दिष्ट करने की क्षमता रखने के लिए बहुत आसान होगा।

या शायद और भी बेहतर: jQuery UI में चयनित शामिल करें। :)

+1

अधिक विशेष रूप से मेरा +1 फ्री-टेक्स्ट एंट्री के साथ रिमोट डेटा स्रोत का उपयोग करने के विचार के लिए है (उदाहरण के लिए टैगिंग में सहायता के लिए AJAX कॉल का उपयोग करना)

क्षमा करें, मैं पर्याप्त रूप से स्पष्ट नहीं था, लेकिन "दूरस्थ डेटा स्रोत" एकीकरण वह है जो मेरा मूल रूप से मतलब था, इसे इंगित करने के लिए धन्यवाद। बेशक, यह प्लगइन jQuery ऑटो कम्प्लीट फीचर से कहीं बेहतर है। जैसा कि दाफिश ने टिप्पणी की, मैं इसे स्वयं jQuery UI के भाग के रूप में देखना पसंद करूंगा।

दूरस्थ डेटा स्रोत समर्थन के लिए +1

मुझे समझ नहीं आया। चुना गया SELECT तत्वों पर बेहतर उपयोगिता और सुंदरता के बारे में है, स्वत: पूर्ण या दूरस्थ डेटा लाने के बारे में नहीं। यदि आप दूरस्थ डेटा चाहते हैं, तो इसे एकत्र करें और चुने हुए कॉल से पहले इसे डी डीओएम में डाल दें ...

@juanghurtado : अगर मेरे पास एक बहु-चयन बॉक्स है जिसमें 300K आइटम हैं, तो मैं वास्तव में इसे पूरी तरह से HTML में नहीं लिख सकता। चुना खोज और चयन के लिए एकदम सही इंटरफ़ेस प्रदान करता है। कई अन्य पुस्तकालय हैं जो यह कार्यक्षमता प्रदान करते हैं, अर्थात [1], [2] और बहुत कुछ। इन सभी में से चुना सबसे अच्छा काम करता है, लेकिन यह बहुत बड़े संग्रह का समर्थन नहीं करता है - जो कि दूरस्थ डेटा स्रोत समर्थन जोड़ देगा। इसके अलावा, अगर चुना इसका समर्थन करता है तो इसका मतलब होगा त्वचा और दो के बजाय एक प्लगइन को अद्यतित रखना।

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

ठीक है, अगर आपके SELECT आइटम पर 300k आइटम हैं, (IMHO) तो आप कुछ गलत कर रहे हैं… उस इंटरफ़ेस को बेहतर तरीके से संभालने के लिए कई विकल्प हैं।

चुनी हुई चीजें कर सकती हैं ... स्विश आर्मी चाकू की तरह, यह बहुत सी चीजें कर सकता है (दूरस्थ डेटा स्रोत, वस्तुओं के लिए छवि संघ, कस्टम फ़िल्टरिंग, AJAX क्वेरी...) और सिर्फ एक के लिए सही उपकरण बनना बंद करें (पारंपरिक SELECT के लिए बेहतर इंटरफ़ेस)

एल 10/08/2011, पिछले 22:56, ivaynberg विवरण:

@juanghurtado : अगर मेरे पास एक बहु-चयन बॉक्स है जिसमें 300K आइटम हैं, तो मैं वास्तव में इसे पूरी तरह से HTML में नहीं लिख सकता। चुना खोज और चयन के लिए एकदम सही इंटरफ़ेस प्रदान करता है। कई अन्य पुस्तकालय हैं जो यह कार्यक्षमता प्रदान करते हैं, अर्थात [1], [2] और बहुत कुछ। इन सभी में से चुना सबसे अच्छा काम करता है, लेकिन यह बहुत बड़े संग्रह का समर्थन नहीं करता है - जो कि दूरस्थ डेटा स्रोत समर्थन जोड़ देगा। इसके अलावा, अगर चुना इसका समर्थन करता है तो इसका मतलब होगा त्वचा और दो के बजाय एक प्लगइन को अद्यतित रखना।

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें:
https://github.com/harvesthq/chosen/issues/79#issuecomment -1776643

वास्तव में इसके साथ बहस नहीं कर सकता ...

मैं चुने हुए से खोज करते समय दूरस्थ डेटा प्राप्त करना चाहता हूं, जैसे jQuery स्वत: पूर्ण प्लगइन, कृपया मेरी मदद करें

+1 दूरस्थ डेटा के लिए समर्थन के लिए।

कोई भी आपको लगता है कि आपका यूआई अच्छा है, लेकिन कुछ समस्याएं हैं, जैसे रिमोट डेटा का समर्थन नहीं करना।

मुझे लगता है कि यह करने योग्य है लेकिन उतना आसान नहीं है जितना कोई सोच सकता है। चूंकि यह जीथब है और ओपन सोर्स कुछ कोड को देखने देता है।

@juanghurtado मुझे यह भी लगता है कि हम मौजूदा कार्यक्षमता को फुलाए बिना ऐसा कर सकते हैं, jQuery और प्रोटोटाइप दोनों हमें वह सब कुछ देते हैं जो हमें दूरस्थ डेटा स्रोतों के लिए चाहिए।

results_search() कीप्रेस के दौरान ट्रिगर होने लगता है - यही वह जगह है जहां मैं चुने हुए डिफ़ॉल्ट व्यवहार को ओवरराइड कर दूंगा। मुझे थोड़ा गहरा खोदने की जरूरत है लेकिन ऐसा लगता है कि अगर हम winnow_results() की नकल कर सकते हैं और लोडिंग व्यवहार दिखाने के लिए एक तरीका जोड़ सकते हैं (उदाहरण के लिए winnow_loading_results ()) यह ठीक काम कर सकता है।

देखने के लिए एक अन्य कार्य winnow_results_clear() है;

कठिन हिस्सा यह पता लगा रहा है कि इसे आसानी से चुना में कैसे एकीकृत किया जाए। क्या यह विकल्पों में होना चाहिए? क्या यह सिर्फ एक उपवर्ग होना चाहिए? और क्या यह कुछ ऐसा है जो मुख्य देव मास्टर प्रोजेक्ट में आने देंगे?

दरअसल - हमें इस मुद्दे को बंद कर देना चाहिए, #162 पर बहुत काम किया जा रहा है जो लगता है कि हम जो चाहते हैं वह सब कुछ है।

बस मैंने सोचा कि मैं इसे जोड़ दूंगा कि आज के युग में यह कार्यक्षमता बहुत जरूरी है और मुझे उम्मीद है कि यह जल्द ही लागू हो जाएगा। हर दूसरे तरीके से चुना गया एकदम सही है। :)

ऐसा क्या हुआ कि दूरस्थ डेटा स्रोत समस्या से लाया जा रहा है?

मुझे लगता है कि @pfiller के लिए बातचीत में शामिल होने का समय आ गया है।

+1 मुझे यह देखना अच्छा लगेगा

जब पृष्ठ परोसा जाता है तो मैं दूरस्थ मानों को एक बार लोड कर रहा हूं, इसलिए यदि मैं नया डेटा अपडेट या प्राप्त नहीं कर सकता, यदि मैं कम से कम चयन में नए विकल्प जोड़ सकता हूं तो पेज रीफ्रेश होने तक मैं क्लाइंट साइड बनाए रख सकता हूं। तो +1 दूरस्थ लाने के लिए और/या +1 नए विकल्प जोड़ने की क्षमता। आशा है कि यह समझ में आता है ...

जलोका अनुरोध के लिए +1

मेरे पास 17500 रिकॉर्ड वाली एक टेबल है और जब मैं पेज लोड करता हूं तो यह धीमा हो जाता है और अंत में यह क्रैश हो जाता है ... मुझे लगता है कि अगर टेबल में मैचों की खोज करने का तरीका लागू किया जा सकता है तो यह सबसे अच्छा होगा।

किसी ने इसे लागू किया है: https://github.com/meltingice/ajax-chosen

मैं एक jQuery गुरु नहीं हूं और वास्तव में मुझे इसके बारे में कुछ नहीं पता है। तो कृपया चीजों को समझाने के मेरे अनजान तरीके को क्षमा करें। मुझे वास्तव में अपनी समस्या का वर्णन करने के लिए सही शब्द नहीं मिल रहे हैं। मैंने बस उस सरल निर्देश का पालन किया: एक वर्ग जोड़ा, स्क्रिप्ट डाली और फ़ंक्शन को बुलाया। उस पृष्ठ को छोड़कर, जिस पर चुनिंदा इनपुट नहीं था, सब कुछ बढ़िया काम करता था। और मुझे यकीन नहीं है कि डेटा अजाक्स की मदद से जाता है। मैं केवल यह मान सकता हूं कि फॉर्म MySQL डेटाबेस की तालिका से उत्पन्न होते हैं। चुनें इनपुट के विकल्प वहां से जाएं। कम से कम ऐसा लग रहा था जब मैंने पेज को एडिट किया था। इसलिए जब मैं पृष्ठ लोड करता हूं तो मुझे अपने चुनिंदा इनपुट में केवल 'chzn-select' वर्ग दिखाई देता है जिसका अर्थ है कि स्क्रिप्ट बिल्कुल भी काम नहीं करती है। संबंधित मुद्दों को पढ़ना मैं समझ गया कि यह दूरस्थ डेटा स्रोत के कारण है, लेकिन मुझे समझ में नहीं आता कि इसे कैसे ठीक किया जाए। वास्तव में मैं वास्तव में समझ नहीं पा रहा हूं कि आप लोग यहां किस बारे में बात कर रहे हैं। मैंने ऊपर दिए गए अजाक्स-चुने गए बिना किसी सफलता के कोशिश की और मैंने यहां वर्णित अन्य 'हैक्स' की कोशिश की। क्या कोई सरल शब्दों में समझा सकता है कि मेरे मामले में कुछ करना संभव है या नहीं?

मैं jQuery 1.4.2 का उपयोग कर रहा हूं, मैक ओएस और विंडोज दोनों पर कोशिश की। आप इसे यहां देख सकते हैं: http://94.125.8.168/eng/ (उड़ान सूचना नामक मध्य खंड में खोज या समय सारिणी टैब पर क्लिक करें)। गंतव्य, उड़ान संख्या और हवाई अड्डे का चयन करना माना जाता है।

@ffiona आपको अपने चुने हुए कॉल को एक jQuery तैयार फ़ंक्शन में लपेटने की आवश्यकता है।

$(document).ready(function() {
  $(".chzn-select").chosen();
});

कृपया भविष्य के प्रश्नों को एक सूत्र के लिए विषय पर रखने का प्रयास करें। यदि आपके कोई प्रश्न हैं, तो एक नया मुद्दा खोलने के लिए आपका स्वागत है।

@pfiller क्या यह एक ऐसी सुविधा है जिस पर आप लोग हैं/या काम करेंगे? मैंने अन्य सभी अजाक्स-चुने हुए हैक्स की कोशिश की है लेकिन उनमें से कोई भी वास्तव में काम नहीं करता है। मुझे वास्तव में इसकी आवश्यकता है क्योंकि मैं स्टॉक एक्सचेंज ऐप पर काम कर रहा हूं जो उपयोगकर्ता स्टॉक प्रतीकों में टाइप करता है, जैसा कि आप जानते हैं कि उनमें से हजारों हो सकते हैं।

@ ऐसा लगता है कि अजाक्स ऑटो को चुने जाने से पूरा करने का मेरा विकल्प एक लंबा शॉट होगा और मुझे विकल्पों की तलाश करनी पड़ सकती है। कोई भी चुने गए w/इस सुविधा के लिए किसी अन्य विकल्प की सिफारिश कर सकता है?

मैंने हाल ही में एक बनाया है .. https://github.com/ksykulev/chosen-ajax-addition

@ksykulev क्या आपके पास इसका लाइव डेमो कहीं है?

@jaequery
एक उदाहरण के साथ जल्दी से जल्दी से हैक किया गया http://sykulev.com/ajaxchosen/index.html

मैंने अपने भंडार में कोड/उदाहरण के तहत कोड जोड़ा।

@ksykulev : आपका संस्करण एकल चयन के साथ वास्तव में बहुत अच्छा काम करता है, धन्यवाद! बीटीडब्ल्यू यह बहुविकल्पीय के साथ काम नहीं करता है। अगर मेरे पास कुछ खाली समय हो तो मैं इसे देख सकता हूं।

@meltingice का संस्करण वास्तव में बहुविकल्पीय पर भी अजीब चीजें करता है, मुझे लगता है कि ऐसा इसलिए है क्योंकि यह चुने गए कार्यों का उपयोग नहीं करता है (इसलिए मूल lib में स्वाभाविक रूप से हल की जाने वाली सभी चीजें AJAX संस्करण में नहीं हैं, उदाहरण के लिए इनपुट रिपोजिशनिंग और परिणाम क्लाइंट को वापस भेजे जाने के बाद आकार बदलना)।

@jbbarth : हाँ आप सही हैं, मैंने इसे बहुविकल्पीयों के साथ परीक्षण नहीं किया है, इसलिए मैं केवल कल्पना कर सकता हूं कि यह बहुत अच्छी तरह से काम नहीं करता है। अपने पुस्तकालय की पूर्णता के संदर्भ में मैं निश्चित रूप से इनके लिए समर्थन जोड़ सकता हूं। मैं उस पर लग जाऊंगा। धन्यवाद!

मैंने चुना के आधार पर लुक और फील के साथ अपना खुद का संस्करण रोल करना समाप्त कर दिया।

https://github.com/ivaynberg/select2

यह AJAX/jsonp दूरस्थ डेटासेट और अनंत स्क्रॉलिंग (पृष्ठांकित दूरस्थ डेटासेट की आलसी लोडिंग) का समर्थन करता है। हालांकि अभी तक बहु-चयन के लिए कोई समर्थन नहीं है।

@ivaynberg मैं इस पर सबकी निगाहें हूं।

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

मुझे चुना का रंगरूप पसंद है, लेकिन यह वास्तव में कार्यान्वयन में वांछित चीजों को छोड़ देता है।

बहुत, बहुत अच्छा काम!

@ivaynberg मैंने देखा है कि आपके पास अभी भी चुने हुए कोड हैं जो विशेष रूप से ड्रॉप-डाउन और खोज इनपुट चौड़ाई की गणना करते हैं।

आप इसे देखना चाहेंगे: https://github.com/harvesthq/chosen/pull/407

मैंने हाल ही में एकाधिक चयनों का समर्थन करने के लिए अपने AJAX चुने हुए संस्करण को अपडेट किया है। http://sykulev.com/ajaxchosen/index.html

@justindujardin Select2 मास्टर में अब फीचर समानता है। मैं 407 में आकार देने वाली सामग्री पर एक नज़र डालूंगा, लेकिन हमें Select2 के प्रोजेक्ट पर और चर्चा करनी चाहिए।

मैं Select2 से प्यार करता हूं और मैं हर किसी को इस पर स्विच करने की सलाह देता हूं। हे।

@ProLoser - इसके लिए धन्यवाद ... ठीक वही जो मैं ढूंढ रहा था। ज्यादा बेहतर विकल्प लगता है।

Select2 FTW!

Select2 जाने का रास्ता है!

इतने सालों के बाद कोई अपडेट?

ऐसा छोटा सा फीचर क्यों गायब है?

हम्म ... वह बदबू आ रही है। मैंने टेक्स्ट हाइलाइटिंग के कारण चुना को लागू करने का निर्णय लिया लेकिन यह नहीं पता था कि AJAX को जोड़ना इतना मुश्किल होगा। मुझे लगता है कि मुझे चयन 2 के साथ जाना चाहिए था अगर हर कोई आवश्यकताओं को पूरा करने के तरीके के रूप में उस पर जाने के लिए जहाज से कूद रहा है। :(

यह एक महान विशेषता है। कई कांटे इस सुविधा का प्रस्ताव देते हैं लेकिन कार्यान्वयन अक्सर अराजक होता है। :+1:

मैं एक आसान बंदर पैच समाधान लेकर आया हूं:

AbstractChosen.prototype.winnow_results = (function(winnow_results) {
  return function() {
    if (this.options.source) {
      return this.options.source.call(this.form_field, this.search_field.val(), (function(_this) {
        return function(results) {
          var id, option, select;
          if (results) {
            select = document.createElement('select');
            select.appendChild(document.createElement('option'));
            for (id in results) {
              if (results.hasOwnProperty(id)) {
                option = document.createElement('option');
                option.value = id;
                option.textContent = results[id];
                select.appendChild(option);
              }
            }
            _this.results_data = SelectParser.select_to_array(select);
          }
          return winnow_results.call(_this);
        };
      })(this));
    } else {
      return winnow_results.call(this);
    }
  };
})(AbstractChosen.prototype.winnow_results);

आप चुने हुए के लिए एक 'स्रोत' फ़ंक्शन विकल्प प्रदान कर सकते हैं जिसे परिणाम प्रस्तुत करने पर बुलाया जाएगा। इसमें स्ट्रिंग इनपुट मान और कॉलबैक फ़ंक्शन तर्क होंगे। कॉलबैक फ़ंक्शन सुझाव प्रस्तुत करता है। यदि परिणाम नहीं बदलना चाहिए था, तो आपको इसे बिना किसी तर्क के तुरंत कॉल करना चाहिए, अन्यथा आप परिणामों के लिए अनुरोध कर सकते हैं और उन्हें प्राप्त होने पर कॉलबैक पर भेज सकते हैं। परिणाम ऑब्जेक्ट में यह प्रारूप है: { value: "label", value2: "label2" } । यहाँ एक उदाहरण है:

var select = $("#select"),
    value;
select.chosen({
    source: function (val, callback) {
        if (value != val) {
            value = val;
            $.get('/suggestions', { value: value }, callback);
        } else
            callback();
    }
});

@faucct जो सुझाव देता है वह काम करता प्रतीत होता है। हालांकि एक मामूली नोट यह है कि यदि आप jQuery संस्करण का उपयोग कर रहे हैं, तो आप चुने हुए दायरे के बाहर, AbstractChosen तक नहीं पहुंच पाएंगे, इसलिए आप शायद उन फ़ाइलों को अंदर के चुने हुए दायरे में जोड़ना चाहते हैं या आपको चुनी हुई जेएस फ़ाइल को संशोधित करने की आवश्यकता होगी और AbstractChosen और SelectParser को वैश्विक दायरे में ले जाएं। एक और समस्या यह है कि, यह खुली सूची को अद्यतन करता है (जिसे चुना गया div बनाता है) लेकिन यह वास्तविक "चयन फ़ील्ड" को अपडेट नहीं करता है, इसलिए आपके द्वारा चुना गया एक विकल्प यदि यह चयन में मौजूद नहीं है तो एक त्रुटि फेंक सकता है। साथ ही ध्यान देने वाली बात यह है कि, आपके द्वारा लिखी गई स्ट्रिंग का उपयोग आपके द्वारा लौटाए गए परिणामों को भी फ़िल्टर करने के लिए किया जाता है। साथ ही जब भी आप कुछ टाइप करते हैं तो यह काम करता है ताकि कॉल न करने के लिए आपके पास मैन्युअल रूप से नियंत्रण हो।

मुझे एक और एक्सटेंशन मिला है: https://github.com/meltingice/ajax-chosen

यह बहुत अच्छी तरह से काम करता है लेकिन वर्तमान संस्करण टूटा हुआ है, आपने कुछ मामूली संशोधन किए हैं। आपको "chzn" को "चुने हुए" से बदलना होगा क्योंकि चुने हुए पुस्तकालय ने इसके आंतरिक सीएसएस नाम बदल दिए हैं। अंतिम परिवर्तन जो आपको करने की आवश्यकता है वह है " listz:updated " के बजाय " चुने गए:अपडेट किए गए " को ट्रिगर करना। रीडमी में यह आपको सीएसएस में एक बग को ठीक करने के लिए कहता है लेकिन यह पहले से ही नए संस्करणों में तय है, इसलिए आपको ऐसा करने की आवश्यकता नहीं है। आप कुछ उपयोगी विकल्प भी सेट कर सकते हैं और यदि उपयोगकर्ता लिखता रहता है, तो सिस्टम लंबित कॉलों को भी रद्द कर देता है।

यह मेरी यात्रा थी :), आशा है कि यह मदद करता है।

मैंने एक प्लगइन बनाकर इस समस्या को हल किया है जो चुने हुए के लिए दूरस्थ डेटा स्रोत को संभालता है, आशा है कि आप सभी इसका आनंद ले सकते हैं

चुना-दूरस्थ-स्रोत (https://github.com/westonganger/chosen-remote-source)

कोड की 200 से कम पंक्तियों के साथ पूरा कोड काफी सरल है
https://github.com/westonganger/chosen-remote-source/blob/master/src/chosen-remote-source.js

चुना का एकमात्र हिस्सा जिसे पैच करने की आवश्यकता थी वह निम्नलिखित था:

// MONKEY PATCH CHOSEN TO NOT CLEAR THE SELECTED RESULTS UPON SEARCHING WITH
chosen_prototype.show_search_field_default = function() {
  if (this.is_multiple && this.choices_count() < 1 && !this.active_field) {
    this.search_field.val(this.default_text);
    return this.search_field.addClass("default");
  } else {
    if(this.default_text === this.search_field.val()){
      this.search_field.val(""); // ORIGINAL LINE, SURROUNDING IF STATEMENT IS CUSTOM
    }

    return this.search_field.removeClass("default");
  }
};
// END CHOSEN PATCH