Using Select2 get error - "Error: No select2/compat/query"

Question

I am attempting to use the Select2 library in my site to leverage placecomplete (following it's rather simple configuration steps here), but when I run the code I get a strange error -

Error: No select2/compat/query`

I've tried googling it and it really seems like no one else has encountered this?

My code in a nutshell is,

loading the files...

<link href="scripts/Select2/dist/css/select2.min.css" rel="stylesheet" /> <script src="scripts/Select2/dist/js/select2.min.js"></script> <script src="scripts/jquery.placecomplete.js">//<![CDATA[//]]></script> 

Tagging an input element in my body...

<input id="example123" class="example123" type="text" /> 

In my document.ready function, calling the following code...

$('#example123').placecomplete({}); 

and thats where it throws the error.

Any ideas where Im going wrong, and what this error means?

Answer 1

You are running into two issues here, both of which can easily be fixed.

1. Select2 4.0.0 no longer supports the query option in the slimmed down, standard build. This must be included in the full build (select2.full.js) as it is handled through a backwards compatibility module.

2. You are using Placecomplete and it depends on an older version of Select2. It looks like Select2 3.5.2+ can work, but I can tell from the options that it is using, it cannot work with Select2 4.0.0. There is an open ticket about this for Placecomplete.

Answer 2

For me, changing the <input /> tag to a <select> tag worked.