Como o Select2 dropdown pode carregar resultados via AJAX

Eu tenho uma checkbox select2 simples que carrega um menu suspenso.

Mas qual é a melhor maneira de recarregar o menu suspenso cada vez que o menu de seleção é aberto com os resultados de uma chamada AJAX? A chamada ajax retornaria

  

e assim por diante

Eu olhei através dos exemplos AJAX nos documentos select2, mas parece um pouco complicado demais para o que eu preciso. TIA

Suponha que você tenha html

  

Hidden field value set in the following format:
'34:Donnie Darko,54:Heat,27:No Country for Old Men'


After it's initialised, the hidden field value will change to:
'34,54,27'
That is the value sent to the server

E para select2 Ajax

 function MultiAjaxAutoComplete(element, url) { $(element).select2({ placeholder: "Search for a movie", minimumInputLength: 1, multiple: true, id: function(e) { return e.id+":"+e.title; }, ajax: { url: url, dataType: 'json', data: function(term, page) { return { q: term, page_limit: 10, apikey: "z4vbb4bjmgsb7dy33kvux3ea" //my own apikey }; }, results: function(data, page) { alert(data); return { results: data.movies }; } }, formatResult: formatResult, formatSelection: formatSelection, initSelection: function(element, callback) { var data = []; $(element.val().split(",")).each(function(i) { var item = this.split(':'); data.push({ id: item[0], title: item[1] }); }); //$(element).val(''); callback(data); } }); }; function formatResult(movie) { return '
' + movie.title + '
'; }; function formatSelection(data) { return data.title; }; MultiAjaxAutoComplete('#e6', 'http://api.rottentomatoes.com/api/public/v1.0/movies.json'); $('#save').click(function() { alert($('#e6').val()); });

Tente fazer uma chamada multiaxe com isso! Consulte – http://jsfiddle.net/JpvDt/112/

Tente isto:

  $(document).ready(function () { $('#Registration').select2({ placeholder: 'Select a registration', allowClear: true, ajax: { quietMillis: 10, cache: false, dataType: 'json', type: 'GET', url: '@Url.Action("GetItems", "ItemsController")', //This asp.net mvc -> use your own URL data: function (registration, page) { return { page: page, pageSize: 100, registration: registration, otherValue: $("#OtherValue").val() // If you have other select2 dropdowns you can get this value }; }, results: function (data, page) { var more = (page * pageSize) < data.total; // whether or not there are more results available return { results: data.dataItems, more: more }; // notice we return the value of more so Select2 knows if more results can be loaded } }, formatResult: FormatResult, formatSelection: FormatSelection, escapeMarkup: function (m) { return m; } }); }); function FormatResult(item) { var markup = ""; if (item.name !== undefined) { markup += ""; } return markup; } function FormatSelection(item) { return item.name; } 

Veja o exemplo Loading Remote Data na página Select2 .

Ele carregará as opções na lista de seleção dinamicamente usando ajax toda vez que for aberto.

 $("#e6").select2({ placeholder: "Search for a movie", minimumInputLength: 1, 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", dataType: 'jsonp', data: function (term, page) { return { 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. // since we are using custom formatting functions we do not need to alter remote JSON data return {results: data.movies}; } } }); 

Se você estiver tentando mostrar o menu suspenso com JSON pré-carregado por padrão, no momento em que clicar no arquivo, espere que o menu suspenso com dados preenchidos apareça, sem digitar em uma única letra, defina minimumInputLength: 0 e funcione como um charme.

Ele aciona JSON como se sua tarefa fosse “carregar JSON em foco usando select2”.

Eu adicionei código, mas devido a não ser capaz de usar o AJAX para recuperar JSON remotamente no snippet, não consegui fazer trechos de código.

Lembre-se, esta é a solução que você adicionou ao seu código, não use um listado abaixo. Eu uso para descrever correção.


  $(".myContainer").select2({ ajax: { url: 'myJSONpath', dataType: 'json', delay: 250, data: function(params) { return { q: params.term, // search term page: params.page }; }, minimumInputLength: 0, // so here is a trick 0 will trigger ajax call right when you click on field processResults: function(data, params) { //process your results }, 

…. e assim continuar com suas outras propriedades …