mix of Select2 Loading Remote Data with Placeholders dropdown

Question

I'm new to the Javascript, jQuery, Ajax and jSON world.

What I need to do is to mix 2 options available with SELECT2

Placeholders

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

and

Loading 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
 });

As you can see from the Select website, these options are quite different. When I click on the Loading Remote Data filed, it opens a search option. But I don't want that. I want the drop down with the options available line the PlaceHolder example.

In the placeholder example, the options available in the dropdown are hardcoded in the HTML. What I need is that when you open, it goes to the jSON file and returns the info available on the json.

The ideal is to use the UI of the Placeholder Select2 with the functionality (fetch json on the server) of the Loading Remote Date form the other Select2 example.

Any idea? I'm open to any super quick Ajax solution if the 2 cannot be combined.

Answer 1

If you only need to load data to your select2 via ajax (no need search via remote api) you can do it this way:

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

(using global variables is often bad practice, but it's just an example)