没有 select2/compat/inputData

Question

I'm using Select2JS 4.0.5 with PHP and jQuery 3.2.1. jQuery is included first, then right after that select2js then after that the rest of JS libraries. My code

if ($("#company").length > 0){   // The code below works with typeaheadJS
$('#company').select2()({
source: function (query, syncResults, asyncResults) {
        $.ajax({
            url: "common/search.php",
            data: 'query=' + query,
            dataType: "json",
            type: "POST",
            success: function (data) {
                asyncResults($.map(data, function (item) {
                    return item;
                }));
            }
        });
    }
});
} 

I keep getting Error: No select2/compat/inputData

Similar questions said that if I include the full version instead this error will be fixed. I if I do that, the error would become

TypeError: $(...).select2(...) is not a function

Answer 1

对我来说，将输入标签更改为选择标签有效。

Answer 2

你需要包含完整版， select2.full.js这个版本支持输入类型，而不仅仅是选择。

Answer 3

Instead of:

import 'select2'

I did:

import 'select2/dist/js/select2.full'

Answer 4

Verify if you don't have others places the Id #company

I had this problem and i find another component using the same Id in my page

Answer 5

Not the solution to your exact problem, but it may help someone with this error.

Using Razor Pages.

Before rendering, add your own id attribute to the @Html.DropDownListFor() . It seems to be that the default one used by the helper does not work.

In your view:

@Html.DropDownListFor(Model => Model.SelectedFile, Model.GetFilesSelectList(), "Select item", new { @id= "SelectedFileId" })

Notice that in this case, normally the id generated would be "SelectedFile". We are overwriting that with new { @id= "SelectedFileId" } dictionary .

And in your JS make the usual selection:

$(document).ready(function () {

    // Variable assignment
    var $producerSelect = $('#SelectedProducerId');
    var $fileSelect = $('#SelectedFileId');

    // Initialize your dropdownlists...
)};