RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-25 14:26:03 +03:00
Code Issues Projects Releases Wiki Activity

Switch remote example to GitHub Search API

Browse Source 
The previous Rotten Tomatoes API had a hard usage limit per day
that was tied to the API key.  It was very common for the usage
limit to be hit by the end of the day, which caused a bad
experience for those interested in trying out Select2 with a remote
API.

The GitHub Search API was chosen as the replacement because it
allows for anonymous usage, so we do not need to tie anything to
tokens, and it is rate-limited to the minute instead of the day.
These two things combined together allows users to use the example
without having to worry as much about it stopping for the rest of
the day.

The formatters and examples were swapped out to use the API, and
a custom formatter was created to replace the old one.
This commit is contained in:
Kevin Brown 2014-08-01 12:47:33 -04:00
parent 1282632b7e
commit 6661e3d744
2 changed files with 49 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_layouts/main.html
View File

@ -9,6 +9,7 @@
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="prettify/prettify.css" rel="stylesheet"/> <link href="prettify/prettify.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
.zebra { background-color: #efefef; } .zebra { background-color: #efefef; }

88
select2-latest.html
View File

@ -63,65 +63,63 @@ $("#e5").select2({
</script> </script>
<script> <script>
function repoFormatResult(repo) {
var markup = '<div class="row-fluid">' +
'<div class="span2"><img src="' + repo.owner.avatar_url + '" /></div>' +
'<div class="span10">' +
'<div class="row-fluid">' +
'<div class="span6">' + repo.full_name + '</div>' +
'<div class="span3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
'<div class="span3"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
'</div>';
function movieFormatResult(movie) { if (repo.description) {
var markup = "<table class='movie-result'><tr>"; markup += '<div>' + repo.description + '</div>';
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></div>';
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; return markup;
} }
function movieFormatSelection(movie) { function repoFormatSelection(repo) {
return movie.title; return repo.full_name;
} }
</script> </script>
<script id="script_e6"> <script id="script_e6">
$(document).ready(function() { $(document).ready(function() {
$("#e6").select2({ $("#e6").select2({
placeholder: "Search for a movie", placeholder: "Search for a repository",
minimumInputLength: 1, minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 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", url: "https://api.github.com/search/repositories",
dataType: 'jsonp', dataType: 'json',
quietMillis: 250,
data: function (term, page) { data: function (term, page) {
return { return {
q: term, // search term 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. 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 // since we are using custom formatting functions we do not need to alter the remote JSON data
return {results: data.movies}; return { results: data.items };
} },
cache: true
}, },
initSelection: function(element, callback) { initSelection: function(element, callback) {
// the input tag has a value attribute preloaded that points to a preselected movie's id // the input tag has a value attribute preloaded that points to a preselected repository's id
// this function resolves that id attribute to an object that select2 can render // 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 // using its formatResult renderer - that way the repository name is shown preselected
var id = $(element).val(); var id = $(element).val();
if (id !== "") { if (id !== "") {
$.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", { $.ajax("https://api.github.com/repositories/" + id, {
data: { dataType: "json"
apikey: "ju6z9mjyajq2djue3gbvv26t"
},
dataType: "jsonp"
}).done(function(data) { callback(data); }); }).done(function(data) { callback(data); });
} }
}, },
formatResult: movieFormatResult, // omitted for brevity, see the source of this page formatResult: repoFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page formatSelection: repoFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
}); });
@ -131,29 +129,27 @@ $("#e6").select2({
<script id="script_e7"> <script id="script_e7">
$(document).ready(function() { $(document).ready(function() {
$("#e7").select2({ $("#e7").select2({
placeholder: "Search for a movie", placeholder: "Search for a repository",
minimumInputLength: 3, minimumInputLength: 3,
ajax: { ajax: {
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", url: "https://api.github.com/search/repositories",
dataType: 'jsonp', dataType: 'json',
quietMillis: 100, quietMillis: 250,
data: function (term, page) { // page is the one-based page number tracked by Select2 data: function (term, page) { // page is the one-based page number tracked by Select2
return { return {
q: term, //search term q: term, //search term
page_limit: 10, // page size page: page // page number
page: page, // page number
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
}; };
}, },
results: function (data, page) { results: function (data, page) {
var more = (page * 10) < data.total; // whether or not there are more results available var more = (page * 30) < data.total_count; // whether or not there are more results available
// notice we return the value of more so Select2 knows if more results can be loaded // notice we return the value of more so Select2 knows if more results can be loaded
return {results: data.movies, more: more}; return { results: data.items, more: more };
} }
}, },
formatResult: movieFormatResult, // omitted for brevity, see the source of this page formatResult: repoFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page formatSelection: repoFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
}); });
@ -571,9 +567,9 @@ $("#e19").select2({ maximumSelectionSize: 3 });
<h3>Loading Remote Data</h3> <h3>Loading Remote Data</h3>
<p>Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:</p> <p>Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:</p>
<p> <p>
<input type="hidden" class="bigdrop" id="e6" style="width:600px" value="16340"/> <input type="hidden" class="bigdrop" id="e6" style="width:600px" value="3620194" />
</p> </p>
<p class="alert alert-warning">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.</p> <p class="alert alert-warning">If this example stops working, you have most likely reached the usage limit for the GitHub Search API of 5 requests per minute. Please wait a few minutes and try again.</p>
<h3>Example Code</h3> <h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e6"></pre> <pre class="prettyprint linenums" id="code_e6"></pre>
<p>Select2 uses jQuery's <code>$.ajax</code> function to execute the remote call by default. An alternative <code>transport</code> function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom <code>query</code> function instead of using the <code>ajax</code> helper.</p> <p>Select2 uses jQuery's <code>$.ajax</code> function to execute the remote call by default. An alternative <code>transport</code> function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom <code>query</code> function instead of using the <code>ajax</code> helper.</p>
@ -590,7 +586,7 @@ $("#e19").select2({ maximumSelectionSize: 3 });
<p> <p>
<input type="hidden" class="bigdrop" id="e7" style="width:600px"/> <input type="hidden" class="bigdrop" id="e7" style="width:600px"/>
</p> </p>
<p class="alert alert-warning">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.</p> <p class="alert alert-warning">If this example stops working, you have most likely reached the usage limit for the GitHub Search API of 5 requests per minute. Please wait a few minutes and try again.</p>
<h3>Example Code</h3> <h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e7"></pre> <pre class="prettyprint linenums" id="code_e7"></pre>
</div> </div>