mix de Select2 Chargement des données à distance avec des espaces réservés dropdown

Question

Je suis nouveau dans le monde Javascript, jQuery, Ajax et jSON.

Ce que je dois faire est de mélanger 2 options disponibles avec SELECT2

Marques de réservation

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

et

Chargement à distance des données

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

Comme vous pouvez le voir sur la Sélectionnez le site Web, ces options sont assez différentes. Lorsque je clique sur le chargement des données à distance déposé, il ouvre une option de recherche. Mais je ne veux pas ça. Je veux le menu déroulant avec les options disponibles dans l'exemple PlaceHolder.

Dans l'exemple d'espace réservé, les options disponibles dans la liste déroulante sont codées en dur dans le code HTML. Ce dont j'ai besoin, c'est que lorsque vous ouvrez, il va dans le fichier jSON et retourne les informations disponibles sur le json.

L'idéal est d'utiliser l'interface utilisateur de l'espace réservé Select2 avec la fonctionnalité (fetch json sur le serveur) de la date de chargement à distance de l'autre exemple Select2.

Une idée? Je suis ouvert à toute solution Ajax super rapide si les 2 ne peuvent pas être combinés.

Answer 1

Si vous avez seulement besoin de charger des données sur votre select2 via ajax (aucune recherche de besoin via api à distance), vous pouvez le faire de cette façon:

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

(en utilisant les variables globales est souvent mauvaise pratique, mais il est juste un exemple)