"Función de consulta no definida para el error indefinido Select2"

Intentando usar Select2 y obteniendo este error en la entrada de múltiples elementos / campo de texto:

"query function not defined for Select2 undefined error"

Cubierto en este hilo del grupo de google

El problema se debió a la división adicional que agregaba select2. Select2 había agregado un nuevo div con la clase "select2-container form-select" para ajustar la selección creada. Entonces, la próxima vez que cargué la función, el error se lanzó cuando select2 se adjuntó al elemento div. Cambié mi selector ...

Prefijo select2 css identificador con el nombre de etiqueta específico "select":

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

Este mensaje de error es demasiado general. Una de sus otras fuentes posibles es que está intentando llamar al select2()método en una entrada ya "select2ed".

En caso de que inicialice una entrada vacía, haga esto:

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

Lea el primer comentario a continuación, explica por qué y cuándo debe usar el código en mi respuesta.

También tuve este problema, asegúrese de no inicializar el select2 dos veces.

Para mí, este problema se redujo a la configuración del atributo data-ui-select2 correcto:

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


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

$scope.selectedProjectManager = {};

Si me quito la datapropiedad $scope.projectManagers, aparece este error.

Este problema se redujo a cómo estaba construyendo mi cuadro de selección select2. En un archivo javascript que tenía ...

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

Y en otro archivo js una anulación ...

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

Mover la segunda anulación a un evento de carga de ventana resolvió el problema.

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

Este problema surgió dentro de una aplicación Rails

También obtuve el mismo error cuando uso ajax con un cuadro de texto, luego lo resuelvo eliminando la clase select2 del cuadro de texto y configuro select2 por id como:

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

Parece que su selector devuelve un elemento indefinido (por lo tanto, undefined errorse devuelve)

En caso de que el elemento realmente exista, está llamando a select2 en un inputelemento sin proporcionar nada para seleccionar2, de donde debe obtener los datos. Por lo general, uno llama .select2({data: [{id:"firstid", text:"firsttext"}]).

También obtuve el mismo error al usar ajax.

Si está utilizando ajax para representar formularios con select2, la clase input_html debe ser diferente de las que NO se representan con ajax. Sin embargo, no estoy muy seguro de por qué funciona de esta manera.

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

Esto se produce porque la consulta no existe en las opciones. Internamente se mantiene una verificación que requiere cualquiera de los siguientes parámetros

• ajax
• etiquetas
• datos
• consulta

Por lo tanto, solo debe proporcionar una de estas 4 opciones para select2 y debería funcionar como se espera.

Tengo el mismo error. He estado usando select2-3.5.2

Este era mi código que tenía error

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

El siguiente código solucionó el problema.

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

Tengo una aplicación web complicada y no pude entender exactamente por qué se produjo este error. Estaba causando que el JavaScript abortara cuando se lanzaba.

En select2.js cambié:

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

a:

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

Ahora todo parece funcionar correctamente, pero todavía está registrando un error en caso de que quiera intentar averiguar qué exactamente en mi código está causando el error. Pero por ahora esta es una solución lo suficientemente buena para mí.

utilizar :

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

}