8
Hallo Ich bin auf der Suche nach Select 2 und was ich bis jetzt gesehen habe, sieht es gut aus. Ich versuche jedoch, eine Sache zu machen.select2 - Kombination von Remote-Daten mit mehreren Auswahl und Pre-Daten
Ich bin auf der Suche nach meinen Daten mit einem AJAX-Aufruf an eine JSON-Datei - es gibt ein Beispiel auf ihrer Website, wie dies zu tun ist, aber ich versuche, eine Liste voraufgefüllt zu haben.
Was ich damit meine ist, wenn ein Benutzer zum Beispiel auf der Suche nach einem Film auf diesen Link
http://ivaynberg.github.io/select2/#infinite
die ersten 10 Filme in der JSON-Datei aufgeführt sind geklickt hat, so gibt es einige prechoices sind.
Kann jemand mich in die richtige dieection Punkt
hier ist mein Code so weit
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
});
});
und die html
<article class="row" id="infinite">
<div class="span12">
<p>
<input type="hidden" class="bigdrop" id="e7" style="width:200px"/>
</p>
</div>
</article>