query function not defined for Select2 undefined error

Question

Trying to use Select2 and getting this error on multiple item input text field    query function not defined for Select2 undefined error

User · Answer

use    try           input-select2   select2      catch err

User · Answer

I have a complicated Web App and I couldn t figure out exactly why this error was being thrown  It was causing the JavaScript to abort when thrown   In select2 js I changed           if  typeof opts query       function                 throw  query function not defined for Select2     opts element attr  id                to           if  typeof opts query       function                 console error  query function not defined for Select2     opts element attr  id                 Now everything seems to work properly but it is still logging in error in case I want to try and figure out what exactly in my code is causing the error  But for now this is a good enough fix for me

User · Answer

In case you initialize an empty input do this       yourelement   select2    data      id        text              Read the first comment below  it explains why and when you should use the code in my answer

User · Answer

I also got the same error when using ajax with a textbox then i solve it by remove class select2 of textbox and setup select2 by id like     function          input-select2   select2

User · Answer

Covered in this google group thread     The problem was because of the extra div that was being added by the select2  Select2 had added new div with class  select2-container form-select  to wrap the select created  So the next time i loaded the function  the error was being thrown as select2 was being attached to the div element  I changed my selector      Prefix select2 css identifier with specific tag name  select       select form-select   select2

User · Answer

For me this issue boiled down to setting the correct data-ui-select2 attribute    lt input type  text  data-ui-select2  select2Options projectManagers  placeholder  Project Manager  ng-model  selectedProjectManager  gt     scope projectManagers        data        Must have data property      scope selectedProjectManager         If I take off the data property on  scope projectManagers I get this error

User · Answer

It seems that your selector returns an undefined element  Therefore undefined error is returned   In case the element really exists  you are calling select2 on an input element without supplying anything to select2  where it should fetch the data from  Typically  one calls  select2  data    id  firstid   text  firsttext

User · Answer

Also got the same error when using ajax   If you re using ajax to render forms with select2  the input html class must be different from those NOT rendered using ajax  Not quite sure why it works this way though

User · Answer

I also had this problem make sure that you don t initialize the select2 twice

User · Answer

if  typeof opts query       function         throw  query function not defined for Select2     opts element attr  id        This is thrown becase query does not exist in options  Internally there is a check maintained which requires either of the following for parameters   ajax tags data query   So you just need to provide one of these 4 options to select2 and it should work as expected

User · Answer

I got the same error  I have been using select2-3 5 2  This was my code which had error          carstatus-select   select2   val  1 2     Below code fixed the issue           carstatus-select   val  1 2

User · Answer

This error message is too general  One of its other possible sources is that you re trying to call select2   method on already  select2ed  input

User · Answer

This issue boiled down to how I was building my select2 select box  In one javascript file I had       function          select2   select2          And in another js file an override       function        var employerStateSelector                        registration employer state   select2  destroy        employerStateSelector select2       placeholder   Select a State                   Moving the second override into a window load event resolved the issue      window   load function       var employerStateSelector                      registration employer state   select2  destroy      employerStateSelector select2       placeholder   Select a State                 This issue blossomed inside a Rails application

[javascript] "query function not defined for Select2 undefined error"

Examples related to javascript

Examples related to runtime-error

Examples related to jquery-select2