Mischung von Select2 Laden von Remote-Daten mit Platzhaltern dropdown

Question

Ich bin neu in der Javascript, jQuery, Ajax und jSON Welt.

Was ich tun müssen, ist 2 Möglichkeiten mit AUSW.2 zur Verfügung zu mischen

Platzhalter

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

und

Laden Remote Data

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

Wie Sie aus der sehen kann Wählen Sie Website, diese Optionen sind sehr unterschiedlich. Wenn ich auf das Feld Entfernte Daten laden klicke, wird eine Suchoption geöffnet. Aber das will ich nicht. Ich möchte das Drop-Down mit den verfügbaren Optionen in der Zeile des PlaceHolder-Beispiels.

Im Platzhalterbeispiel sind die im Dropdown-Menü verfügbaren Optionen im HTML-Code fest codiert. Was ich brauche ist, dass wenn Sie öffnen, es in die jSON-Datei und gibt die verfügbaren Informationen auf dem JSON zurück.

Ideal ist es, die Benutzeroberfläche des Placeholder Select2 mit der Funktionalität (Json auf dem Server holen) des Loading Remote Date aus dem anderen Select2 Beispiel zu verwenden.

Irgendeine Idee? Ich bin offen für jede super schnelle Ajax-Lösung, wenn die 2 nicht kombiniert werden kann.

Answer 1

Wenn Sie nur Daten zu Ihrem select2 über Ajax geladen werden müssen (keine Notwendigkeit Suche per Remote-api) Sie können es auf diese Weise tun: nur

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

(oft schlechte Praxis globale Variablen verwenden, aber es ist ein Beispiel)