select2 et à distance de données: pré-valeur de consigne et le texte en évitant serveur aller-retour

Je suis de la génération de mes balises HTML côté serveur (asp.net mvc4).

Je voudrais pré-définir la valeur et la description de mon champ CACHÉ en évitant l'appel ajax pour récupérer les données dans le initSelection fonction.

J'ai vu quelqu'un de la configuration des valeurs à l'aide de javascript:

$("#select2Test").select2('data', { id: 20832, text: 'LONDON' })

mais encore il m'obligerait extra-code pour accomplir quelque chose qui a déjà été diffusée à partir du serveur dans un viewmodel.

Je suis venu avec quelque chose comme ceci:

<input type="hidden" id="select2Test" name="select2Test" value="20832" data-option="LONDON" />

J'ai utilisé un HTML5, l'attribut de données data-option avec la description de ma recherche et j'ai mis en place le initSelection fonction de sorte que je peut lire la valeur de mon domaine et c'est l'attribut de données:

initSelection: function (item, callback) {
   var id = item.val();
   var text = item.data('option');
   var data = { id: id, text: text };
   callback(data);
},

J'ai vu que initSelection est appelée que lorsque le champ caché a une valeur définie.

Tout semble fonctionner correctement.

Y a de meilleures options?

  • Que faites-vous exactement dans le rappel? Ne serait-il pas préférable de charger que les données sur le chargement de la page?
  • J'ai mis à jour ma question. Il y a le code complet là. Le chargement de la page déjà. Mon contrôleur retourne une vue et un viewmodel avec l'ensemble du jeu de données.
InformationsquelleAutor LeftyX | 2013-05-16
  1. 14

    data-option combiné avec une mesure initSelection a fait le tour.

        $("#lookup_id").select2({
        minimumInputLength: 3,
        multiple: false,
        allowClear: true,
        ajax: {
            url: urlFetchCity,
            dataType: 'json',
            type: "POST",
            data: function (term, page) { return { city: term }; },
            results: function (data, page) {
                return {
                    return {results: data};
                };
            }
        },
        initSelection: function (item, callback) {
            var id = item.val();
            var text = item.data('option');
            var data = { id: id, text: text };
            callback(data);
        },
        formatResult: function (item) { return ('<div>' + item.id + ' - ' + item.text + '</div>'); },
        formatSelection: function (item) { return (item.text); },
        escapeMarkup: function (m) { return m; }
    });

    pour ceux qui sont intéressés, j'ai créé un GitHub où vous pouvez trouver une ASP.NET MVC4 projet dans lequel j'ai ajouté un helper html pour créer un select2 balises avec toutes les fonctionnalités pour la validation côté client.

    • Merci ! juste ce que je cherchais.
    • Vous êtes les bienvenus.
    InformationsquelleAutor LeftyX