2012-09-12 15 views
6

के साथ चयन 2 लोडिंग रिमोट डेटा का मिश्रण मैं जावास्क्रिप्ट, jQuery, अजाक्स और जेएसओएन दुनिया में नया हूं।प्लेसहोल्डर ड्रॉपडाउन

मैं क्या करने की जरूरत है 2 Select2 साथ उपलब्ध विकल्पों

प्लेसहोल्डर

$("#e2_2").select2({ 
    placeholder: "Select a State" 
}); 

और

लोड हो रहा है रिमोट मिश्रण करने डाटा

$("#e6").select2({ 
    placeholder: "Search for a movie", 
    minimumInputLength: 1, 
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 
     url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", 
     dataType: 'jsonp', 
     data: function (term, page) { 
      return { 
       q: term, // search term 
       page_limit: 10, 
       apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working 
      }; 
     }, 
     results: function (data, page) { // parse the results into the format expected by Select2. 
      // since we are using custom formatting functions we do not need to alter remote JSON data 
      return { 
       results: data.movies 
      }; 
     } 
    }, 
    formatResult: movieFormatResult, // omitted for brevity, see the source of this page 
    formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page 
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
}); 

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

प्लेसहोल्डर उदाहरण में, ड्रॉपडाउन में उपलब्ध विकल्प HTML में हार्डकोड किए गए हैं। क्या मैं जरूरत है कि जब आप खोलते हैं, तो JSON फ़ाइल में जाता है और जानकारी json पर उपलब्ध रिटर्न है।

आदर्श लोडिंग रिमोट डेट के अन्य विकल्प 2 उदाहरण के रूप में कार्यक्षमता (सर्वर पर लाने वाले सर्वर पर) के साथ प्लेसहोल्डर चयन 2 के यूआई का उपयोग करना आदर्श है।

कोई विचार? यदि 2 संयुक्त नहीं किया जा सकता है तो मैं किसी भी सुपर त्वरित अजाक्स समाधान के लिए खुला हूं।

+0

कोणीय को देखने के लायक हो सकता है: http://angular-ui.github.com/#directives-select2 – Tosh

उत्तर

1

आप केवल ajax के माध्यम से अपने Select2 करने के लिए डेटा लोड करने के लिए (रिमोट एपीआई के माध्यम से कोई जरूरत नहीं खोज) की जरूरत है आप इसे इस तरह से कर सकते हैं:

$.get("/path/to/your/data.json", function(data){window.ajaxData=data;}); 
$("#e2_2").select2({data: window.ajaxData, placeholder: "Select a State"}); 

(वैश्विक चर का उपयोग कर अक्सर खराब व्यवहार का है, लेकिन यह सिर्फ है एक उदाहरण)

संबंधित मुद्दे