“Função de consulta não definida para erro indefinido do Select2”

Tentando usar o Select2 e obter este erro no campo de entrada / texto de vários itens:

"query function not defined for Select2 undefined error"

Coberto neste tópico do grupo do Google

O problema ocorreu devido à div extra que estava sendo adicionada pelo select2. O Select2 adicionou uma nova div com a classe "select2-container form-select" para agrupar o select criado. Então, da próxima vez que carreguei a função, o erro estava sendo gerado, pois select2 estava sendo anexado ao elemento div. Eu mudei meu seletor ...

Prefixe o identificador css select2 com o nome de tag específico "select":

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

Esta mensagem de erro é muito geral. Uma de suas outras fontes possíveis é que você está tentando chamar o select2()método na entrada "select2ed" já.

Caso você inicialize uma entrada vazia, faça o seguinte:

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

Leia o primeiro comentário abaixo, explica por que e quando você deve usar o código na minha resposta.

Eu também tive esse problema, verifique se você não inicializou o select2 duas vezes.

Para mim, esse problema se resumia em definir o atributo data-ui-select2 correto:

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


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

$scope.selectedProjectManager = {};

Se eu retirar a datapropriedade $scope.projectManagers, recebo esse erro.

Esse problema se resumia a como eu estava construindo minha caixa de seleção select2. Em um arquivo javascript eu tinha ...

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

E em outro arquivo js uma substituição ...

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

Mover a segunda substituição para um evento de carregamento de janela resolveu o problema.

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

Esse problema floresceu dentro de um aplicativo Rails

Eu também recebi o mesmo erro ao usar ajax com uma caixa de texto, então eu resolvo isso removendo a classe select2 da caixa de texto e a instalação select2 pela id como:

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

Parece que seu seletor retorna um elemento indefinido (portanto, undefined error é retornado)

Caso o elemento realmente exista, você está chamando select2 em um inputelemento sem fornecer nada para selecionar2, de onde deve buscar os dados. Normalmente, um chama .select2({data: [{id:"firstid", text:"firsttext"}]).

Também obteve o mesmo erro ao usar o ajax.

Se você estiver usando o ajax para renderizar formulários com o select2, a classe input_html deve ser diferente daquela NÃO processada usando o ajax. Não sei ao certo por que funciona dessa maneira.

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

Isso é acionado porque a consulta não existe nas opções. Internamente, é mantida uma verificação que requer um dos seguintes itens para os parâmetros

• ajax
• Tag
• dados
• inquerir

Então, você só precisa fornecer uma dessas 4 opções para selecionar2 e deve funcionar conforme o esperado.

Eu recebi o mesmo erro. Eu tenho usado select2-3.5.2

Este foi o meu código que teve erro

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

O código abaixo corrigiu o problema.

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

Eu tenho um aplicativo da Web complicado e não consegui descobrir exatamente por que esse erro estava sendo gerado. Isso estava causando o cancelamento do JavaScript quando lançado.

No select2.js eu mudei:

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

para:

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

Agora tudo parece funcionar corretamente, mas ainda está efetuando login no erro, caso eu queira tentar descobrir o que exatamente no meu código está causando o erro. Mas, por enquanto, isso é uma correção boa o suficiente para mim.

usar :

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

}