select2 - combining getting remote data with muliple select and pre data

Question

Hi I am looking to use select 2 and what I have seen so far it looks good. I am trying to do one thing though.

I am looking to get my data with an ajax call to a json file - there is an example on their website on how to do this but I am trying to have a prepopulates list.

What I mean by this is when a user for example has clicked on search for a movie on this link

http://ivaynberg.github.io/select2/#infinite

the first 10 movies in the json file are listed so there are some prechoices.

Can anyone point me in the right dieection

here is my code so far

function movieFormatResult(movie) {
    var markup = "<table class='movie-result'><tr>";
    if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
        markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
    }
    markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
    if (movie.critics_consensus !== undefined) {
        markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
    }
    else if (movie.synopsis !== undefined) {
        markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
    }
    markup += "</td></tr></table>"
    return markup;
}

function movieFormatSelection(movie) {
    return movie.title;
}

$(document).ready(function() {
$("#e7").select2({
    placeholder: "More",
    minimumInputLength: 3,
    ajax: {
        url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
        dataType: 'jsonp',
        quietMillis: 100,
        data: function (term, page) { // page is the one-based page number tracked by Select2
            return {
                q: term, //search term
                page_limit: 10, // page size
                page: page, // page number
                apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total; // whether or not there are more results available

            // notice we return the value of more so Select2 knows if more results can be loaded
            return {results: data.movies, more: more};
        }
    },
    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
    multiple: true,
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
});

and the html

    <article class="row" id="infinite">
<div class="span12">

   <p> 
 <input type="hidden" class="bigdrop" id="e7" style="width:200px"/> 



   </p>

</div>
</article>

Answer 1

You can set the minimumInputLength parameter to 0, which will then attempt to query your URL with no search value. Then set up your server response to return the 10 options if there isn't a search string.