"Fonction de requête non définie pour l'erreur Select2 non définie"

Essayer d'utiliser Select2 et obtenir cette erreur sur plusieurs champs de saisie / texte:

"query function not defined for Select2 undefined error"

Couvert dans ce fil de discussion du groupe Google

Le problème était dû au div supplémentaire ajouté par le select2. Select2 avait ajouté un nouveau div avec la classe "select2-container form-select" pour encapsuler le select créé. Ainsi, la prochaine fois que j'ai chargé la fonction, l'erreur était renvoyée car select2 était attaché à l'élément div. J'ai changé mon sélecteur ...

Préfixe select2 identifiant css avec le nom de tag spécifique "select":

$('select.form-select').select2();

Ce message d'erreur est trop général. Une de ses autres sources possibles est que vous essayez d'appeler la select2()méthode sur une entrée déjà "sélectionnée".

Si vous initialisez une entrée vide, procédez comme suit:

$(".yourelement").select2({
 data: {
  id: "",
  text: ""
 }
});

Lisez le premier commentaire ci-dessous, il explique pourquoi et quand utiliser le code dans ma réponse.

J'ai également eu ce problème pour m'assurer que vous n'initialisez pas le select2 deux fois.

Pour moi, ce problème se résumait à la définition de l'attribut data-ui-select2 correct:

<input type="text" data-ui-select2="select2Options.projectManagers" placeholder="Project Manager" ng-model="selectedProjectManager">


$scope.projectManagers = { 
  data: []  //Must have data property 
}

$scope.selectedProjectManager = {};

Si j'enlève la datapropriété, $scope.projectManagersj'obtiens cette erreur.

Ce problème se résumait à la façon dont je construisais ma boîte de sélection select2. Dans un fichier javascript que j'avais ...

$(function(){
  $(".select2").select2();
});

Et dans un autre fichier js, un remplacement ...

$(function(){
    var employerStateSelector = 
                $("#registration_employer_state").select2("destroy");
    employerStateSelector.select2({
    placeholder: 'Select a State...'
    });
});

Le déplacement du deuxième remplacement dans un événement de chargement de fenêtre a résolu le problème.

$( window ).load(function() {
  var employerStateSelector = 
              $("#registration_employer_state").select2("destroy");
  employerStateSelector.select2({
    placeholder: 'Select a State...'
  });
});

Ce problème s'est développé dans une application Rails

J'ai également eu la même erreur lors de l'utilisation d'ajax avec une zone de texte, puis je le résolve en supprimant la classe select2 de la zone de texte et en configurant select2 par id comme:

$(function(){
  $("#input-select2").select2();
});

Il semble que votre sélecteur retourne un élément indéfini (donc undefined errorest retourné)

Dans le cas où l'élément existe vraiment, vous appelez select2 sur un inputélément sans rien fournir à select2, d'où il doit récupérer les données. Typiquement, on appelle .select2({data: [{id:"firstid", text:"firsttext"}]).

J'ai également eu la même erreur lors de l'utilisation d'ajax.

Si vous utilisez ajax pour rendre les formulaires avec select2, la classe input_html doit être différente de celles NON rendues à l'aide d'ajax. Je ne sais pas trop pourquoi cela fonctionne de cette façon.

if (typeof(opts.query) !== "function") {
    throw "query function not defined for Select2 " + opts.element.attr("id");
}

Ceci est lancé car la requête n'existe pas dans les options. En interne, il y a un contrôle maintenu qui nécessite l'un des éléments suivants pour les paramètres

• Ajax
• Mots clés
• Les données
• requete

Il vous suffit donc de fournir l'une de ces 4 options pour select2 et cela devrait fonctionner comme prévu.

J'ai eu la même erreur. J'utilise select2-3.5.2

C'était mon code qui avait une erreur

    $('#carstatus-select').select2().val([1,2])

Le code ci-dessous a résolu le problème.

    $('#carstatus-select').val([1,2]);

J'ai une application Web compliquée et je ne pouvais pas comprendre exactement pourquoi cette erreur était générée. Cela provoquait l'abandon du JavaScript lorsqu'il était lancé.

Dans select2.js j'ai changé:

        if (typeof(opts.query) !== "function") {
            throw "query function not defined for Select2 " + opts.element.attr("id");
        }

à:

        if (typeof(opts.query) !== "function") {
            console.error("query function not defined for Select2 " + opts.element.attr("id"));
        }

Maintenant, tout semble fonctionner correctement, mais il enregistre toujours une erreur au cas où je voudrais essayer de comprendre ce qui exactement dans mon code est à l'origine de l'erreur. Mais pour l'instant, c'est une solution assez bonne pour moi.

utilisation :

try {
    $("#input-select2").select2();
}
catch(err) {

}