50

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?

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Simon
  • 2,065
  • 3
  • 21
  • 28
  • 1) Did you include jQuery? (sounds dumb but it happens sometimes :) 2) are you sure that the files names are correct and the files are loaded? (Check in your network tab and console) – Jeremy Thille May 14 '15 at 11:22
  • Does it really support `input` elements rather than only `select` elements? – matanster May 24 '16 at 17:24

4 Answers4

90

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.

Kevin Brown-Silva
  • 40,873
  • 40
  • 203
  • 237
  • 3
    Can you tell me how to require the full version? I have installed `select2` via npm and I have both `select2.js` and `select2.full.js`, I require it as `require('select2');`, how can I do the same to get the full version? – aks Oct 19 '16 at 05:22
  • 6
    `require('select2/dist/js/select2.full');` should work – pcothenet Dec 28 '16 at 03:36
20

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

Payam Khaninejad
  • 7,692
  • 6
  • 45
  • 55
18

I've had this when you have two controls on your web page with the same Id - I had a hidden control and a select (the hidden control was first).

Liam
  • 5,033
  • 2
  • 30
  • 39
0

This can also happen if you try to initialize select2 on field type that does not "support" select2, like a hidden field or something along those lines.

rii
  • 1,578
  • 1
  • 17
  • 22