web-dev-qa-db-fra.com

Comment Select2 peut-il déposer les résultats de charge via AJAX

J'ai un simple select2 qui charge un menu déroulant.

Mais quel est le meilleur moyen de recharger le menu déroulant chaque fois que le menu de sélection s'ouvre avec les résultats d'un appel AJAX? L'appel ajax reviendrait

<option value=1>
<option value=2>

etc

J'ai jeté un œil aux exemples de AJAX figurant dans la documentation de Select2, mais cela semble un peu compliqué pour ce dont j'ai besoin. TIA

javascriptjqueryajaxjquery-select2
9
Richard Alastair Harley

Suppose que vous avez html 

   <p>
    Hidden field value set in the following format:
    <br />
    <em>'34:Donnie Darko,54:Heat,27:No Country for Old Men'
    </em></p>
<input type='hidden' id="e6" style="width: 500px;" value="34:Donnie Darko,54:Heat,27:No Country for Old Men"  />
<br /> <button id="save">Save</button>
<p>
After it's initialised, the hidden field value will change to:<br />
<em>'34,54,27'</em>
<br />
That is the value sent to the server
</p>​

Et pour 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 '<div>' + movie.title + '</div>';
};

function formatSelection(data) {
    return data.title;
};



MultiAjaxAutoComplete('#e6', 'http://api.rottentomatoes.com/api/public/v1.0/movies.json');

$('#save').click(function() {
    alert($('#e6').val());
});

Essayez d’appeler multiajax avec ceci! Reportez-vous - http://jsfiddle.net/JpvDt/112/

9
Sri

Essaye ça:

    $(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 += "<option value='" + item.id + "'>" + item.name + "</option>";
        }
        return markup;
    }

    function FormatSelection(item) {
        return item.name;
    }
2
Peter Ming

Voir le Chargement de données distantes exemple sur la page Web Select2 .

Il chargera les options de la liste de sélection de manière dynamique en utilisant ajax à chaque ouverture.

$("#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};
            }
        }
    });
1
stpe

Si vous essayez d'afficher la liste déroulante avec du JSON pré-chargé par défaut, le moment où vous cliquez sur le fichier que vous souhaitez afficher doit apparaître avec la liste des données renseignées, sans avoir à taper une seule lettre, Set minimumInputLength: 0 et fonctionne comme un charme.

Cela déclenche le JSON comme si votre tâche consistait à "charger le JSON avec le focus à l'aide de select2".

J'ai ajouté du code mais, ne pouvant pas utiliser AJAX pour récupérer JSON à distance dans un extrait, je ne pouvais pas utiliser l'extrait. 

N'oubliez pas que c'est une solution que vous avez ajoutée à votre code, n'utilisez pas l'une des solutions répertoriées ci-dessous. Je l'utilise pour décrire le correctif. 

  $(".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  
     },

.... et ainsi on continue avec vos autres propriétés ... 

0
StefaDesign