web-dev-qa-db-fra.com

jquery select2 - ne fonctionne pas

J'utilise le plugin select2 (ivaynberg.github.io/select2). J'essaie d'afficher une liste déroulante (sélectionnez). Il obtient tous les éléments de data.php en tant qu'options. Toutefois, select2 est censé être un plug-in à complétion automatique et doit rechercher le terme de recherche comme entrée client et afficher uniquement les résultats correspondants. Pour le moment, tous les éléments sont affichés et les résultats de la recherche ne sont pas obtenus. Désolé pour ma langue

data.php fait écho à ceci:

[{
    "id": "1",
    "text": "item1",
    "exercise": "blah text"
  }, {
    "id": "2",
    "text": "item2"
  }
]

Le code est:

$(document).ready(function () {
    $('#thisid').select2({
        minimumInputLength: 2,
        ajax: {
            url: "data.php",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });
});

et l'entrée est:

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />

Je veux trouver un indice, je suis assez nouveau dans ce plugin et j'ai passé une journée à regarder des exemples.

jqueryajaxjquery-select2
19
user2315153

select2 ne fera pas AJAX s'il est attaché à un contrôle de formulaire select standard. Il DOIT être attaché à un contrôle input caché pour pouvoir être chargé via AJAX.

Update: cela a été corrigé dans Select2 4.0. De Notes préliminaires :

Cohérence avec les éléments <select> standard pour tous les adaptateurs de données, supprimant ainsi le besoin d'éléments <input> cachés.

On peut aussi le voir en fonction dans la section exemples .

30
GGregson

J'imagine que user2315153 souhaite recevoir plusieurs valeurs distantes et n'affecte pas correctement select2 () avec un appel ajax à un élément <select>.

La méthode correcte pour obtenir des valeurs distantes consiste à utiliser un élément <entrée> normal. Si vous souhaitez définir plusieurs valeurs, indiquez le paramètre "multiple" à l'appel de la méthode. Exemple:

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
<script>
$('#thisid').select2({
        minimumInputLength: 2,
        multiple: true,
        ajax: {
              ...

L'élément <select> ne peut pas être utilisé pour des valeurs distantes

UPDATE: A partir de select2 4.0.0, les entrées cachées sont obsolètes:

https://select2.github.io/announcements-4.0.html#hidden-input

Cela signifie: au lieu d'utiliser une entrée pour le plugin attrib select2, utilisez une balise SELECT.

Faites attention: il est facile d’utiliser tout format de JSON depuis votre serveur. Utilisez simplement "processResults" pour le faire.

Exemple:

<select id='thisid' class='select2-input select2'></select>
<script>
        $("#thisid").select2({
            multiple: true,
            closeOnSelect: true,

            ajax: { 
                url: "myurl",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                      q: params.term,
                      page: params.page
                    };
                  },
                processResults: function (data, page) { //json parse
                    console.log("processing results");
                    //Transform your json here, maybe using $.map jquery method
                    return { 
                       results: yourTransformedJson
                    };
                },
                cache: (maybe)true
            }
        });
</script>
9
Marcelo Amorim

J'essaye le code, ça marche bien. Je pense que vous n'incluez pas le cadre JQuery ou vérifiez le chemin de JS et CSS.

<!DOCTYPE html>
<html>
<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script src="select2.min.js"></script>
    <script>
        $(document).ready(function() { 
            $('#thisid').select2({
                minimumInputLength: 2,
        ajax: {
            url: "data.php",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });

        });
    </script>
</head>
<body>
    <input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />

</body>
</html>
5
Tamil Selvan C

Je pense pas besoin d'aller avec élément d'entrée caché. Vous pouvez essayer, obtenir des données HTML simples à partir d'un appel ajax et les définir, puis init 2 méthode de réinitialisation. Voici l'extrait de code

HTML

<select id="select" name="select" class="select2">
        <option value="" selected disabled>Please Select Above Field</option>
</select>

Javascript 

    $.ajax({
        type: "POST",
        cache:false,
        url: YOUR_AJAX_URL,
        success: function(response)
        {
            $('#select').html(response);
        }
    });
    $('#select').select2("val","");

Réponse Ajax: 

<option value="value">Option Name</option>
.
.
.
<option value="value">Option Name</option>
1
Hardik Thaker

Après beaucoup de lecture, j'ai décidé de changer le select2.js lui-même.

À la ligne 2109, remplacez-le par

this.focusser.attr("id", "s2id_"+this.select.context.id);

Si votre balise d'entrée est comme telle

<select id="fichier">

Ainsi, votre tag d’entrée qui cherche dans la liste aura un id de s2id_fichier_search

Autant que je sache, il ne devrait pas y avoir de conflit et CECI vous permettra d'avoir plusieurs sélections2 sur la même page et d'exécuter vos fonctions (y compris .get, .post) au travers de leurs événements, par exemple.

$(function() { 
  $('#s2id_fichier_search').keyup(function() {
    console.log('Be Practical')
  })
}

Donc, cela fonctionnera comme si vous deviez utiliser

<select id="fichier" onkeyup="console.log('Be Practical')">
0
Shakir