Getting No match found when I search or click in text area. How do I display my data in the dropdown

How Do I...
#1

Select2 dropdown does not find and data. If I click in the text area or enter chars to search. It always says “No match found”

scripts1.js

$("#getDevs").select2({
//placeholder: “Enter Devices for Maintenance”,
multiple: true,
allowClear: true,
ajax: {
url: ‘data/devices.json’,
dataType: ‘json’,
delay: 750,
data: function (query) {
//console.log(query)
return { search: query.term };
},
processResults: function (data,query) {
// parse the results into the format expected by Select2
console.log(data)
return {
//results: JSON.parse(data),
results: data
};
}
}
})

HTML

</div>
    <input id="getDevs" style="width:50%;" placeholder="Enter text and scroll for more results" />
</div>

I have the data loaded here is the console log:

  1. {results: Array(21956), pagination: {…}}

  2. pagination: {more: true}

  3. results: (21956) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

  4. proto: Object

This does show all my devices.

#2

Remove the data property from your Select2 initializer. That property is used to supply a static data object to the Select2. Since you’re using Ajax to retrieve the data, you don’t want to specify the data property too (it seems to be overriding the Ajax data, and since it’s not returning a data object that Select2 understands, Select2 thinks it had no data).

Also, I don’t think you need the processResults callback, since the data you’re retrieving via Ajax already appears to be in the expected format.

#3

How do I remove the data property? is this it? data: function (query) {
//console.log(query)
return { search: query.term };
},

#4

Hi John,

I got 4.0.7 working now. Thanks for all your help!!

I do see this violation:
[Violation] Forced reflow while executing JavaScript took 35ms

not sure how to correct it?

Any Thoughts?

#5

I’m glad you got it working!

FYI, that violation message is something that Chrome reports when some JavaScript code (not necessarily yours–it could be coming from the Select2 code itself or from jQuery) performs or causes a UI operation that, in Chrome’s opinion, takes too long. You can ignore that message.