Ciao Sto cercando di utilizzare selezionare 2 e quello che ho visto finora sembra buono. Sto cercando di fare una cosa però.select2 - combinazione di ottenere i dati remoti con selezione multipla e pre dati
Sto cercando di ottenere i miei dati con una chiamata ajax a un file JSON - c'è un esempio sul loro sito web su come farlo, ma sto cercando di avere una lista di prepopolati.
Cosa voglio dire con questo è quando un utente, ad esempio ha cliccato su ricerca di un film su questo link
http://ivaynberg.github.io/select2/#infinite
i primi 10 film in file JSON sono elencati quindi ci sono alcune prescelte.
Qualcuno mi può punto nella dieection destra
Ecco il mio codice finora
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
});
});
e l'html
<article class="row" id="infinite">
<div class="span12">
<p>
<input type="hidden" class="bigdrop" id="e7" style="width:200px"/>
</p>
</div>
</article>