diff --git a/index.html b/index.html index d6651eb8..75329091 100644 --- a/index.html +++ b/index.html @@ -105,6 +105,20 @@ $("#e6").select2({ return {results: data.movies}; } }, + initSelection: function(element, callback) { + // the input tag has a value attribute preloaded that points to a preselected movie's id + // this function resolves that id attribute to an object that select2 can render + // using its formatResult renderer - that way the movie name is shown preselected + var id=$(element).val(); + if (id!=="") { + $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", { + data: { + apikey: "ju6z9mjyajq2djue3gbvv26t" + }, + dataType: "jsonp" + }).done(function(data) { callback(data); }); + } + }, 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 @@ -508,7 +522,7 @@ $("#e19").select2({ maximumSelectionSize: 3 });

Loading Remote Data

Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:

- +

If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.

Example Code

diff --git a/select2-latest.html b/select2-latest.html index 58411caa..7806ffda 100644 --- a/select2-latest.html +++ b/select2-latest.html @@ -105,6 +105,20 @@ $("#e6").select2({ return {results: data.movies}; } }, + initSelection: function(element, callback) { + // the input tag has a value attribute preloaded that points to a preselected movie's id + // this function resolves that id attribute to an object that select2 can render + // using its formatResult renderer - that way the movie name is shown preselected + var id=$(element).val(); + if (id!=="") { + $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", { + data: { + apikey: "ju6z9mjyajq2djue3gbvv26t" + }, + dataType: "jsonp" + }).done(function(data) { callback(data); }); + } + }, 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 @@ -520,7 +534,7 @@ $("#e19").select2({ maximumSelectionSize: 3 });

Loading Remote Data

Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:

- +

If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.

Example Code