"query function not defined for Select2 undefined error"

Trying to use Select2 and getting this error on multiple item input/text field:

"query function not defined for Select2 undefined error"

Solution 1:

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();

Solution 2:

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.

Solution 3:

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.

Solution 4:

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

Solution 5:

For me this issue boiled down to setting the correct data-ui-select2 attribute:

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


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

$scope.selectedProjectManager = {};

If I take off the data property on $scope.projectManagers I get this error.