"query function not defined for Select2 undefined error"

Question

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

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.

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.

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

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.