How can I resolve the error "Uncaught TypeError: b.slice is not a function" that happens on select2 plugin?

Question

I have following jquery function:

$("#cliente").select2({
    placeholder: '--select--',
    minimumInputLength: 3,
    ajax: {
        url: path+'js/php-files/autocomplete.php',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                term: params.term // search term
            };
        },
        results: function (data) {
            return {
                results: data.results
            };
        }
    }
});

In the PHP file (autocomplete.php), I have:

$bo = new ClienteBO();
$list = $bo->findAutoComplete($_GET['term']);

$results = array();
$first = true;
$count = count($list);
for ($i = 0; $i < $count; $i++) {
    $results['id'] = $list[$i]['codCliente'];
    $results['text'] = htmlspecialchars($list[$i]['nomeCliente']);
}
$ret['results'] = $results;
echo json_encode($ret);

And a HTML file

<div class="form-group">
    <label for="cliente">Cliente:</label>
    <select name="cliente" id="cliente" class="form-control">
        <option></</option>
    </select>
</div>

When I see the Console chrome error, I have following result:

Uncaught TypeError: b.slice is not a function               select2.min.js:2
a.removePlaceholder             @ select2.min.js:2
j                               @ select2.min.js:1
a.append                        @ select2.min.js:2
j                               @ select2.min.js:1
(anonymous function)            @ select2.min.js:1
d.invoke                        @ select2.min.js:1
d.trigger                       @ select2.min.js:1
e.trigger                       @ select2.min.js:2
(anonymous function)            @ select2.min.js:2
(anonymous function)            @ select2.min.js:2
(anonymous function)            @ jquery.min.js:2
j                               @ jquery.min.js:2
k.fireWith                      @ jquery.min.js:2
x                               @ jquery.min.js:4
b                               @ jquery.min.js:4

I use plugin select2 version 4.0.0. How can I resolve this situation?

Thanks!

Solution

I get the exact same error, I am using laravel, I only get the error when I am using an ajax request to get values from a Controller. I realized that in one instance it was working and in another it was causing this error. Using a collection here is what I sent from the controller:

WORKS:

PHP

$query = Exchange::where('active', 1)->select(['id', 'name as text'])->get()->toArray();

return json_encode(['results' => $exchanges]);

JSON

{"results":[{"id":12,"text":"Binance"}]}

DOES NOT WORK:

PHP

$bases = ExchangePair::where('active', 1)->get()->pluck('base')->unique()->toArray();

json_encode(['results' => $bases]);

JSON

{"results":{"0":{"id":12,"text":"BTC"},"4":{"id":120,"text":"456"},"5":{"id":1,"text":"ETH"},"12":{"id":119,"text":"USDT"},"102":{"id":3,"text":"BNB"}}}

PROBLEM

I realized it was the formatting. The way the formatting was being altered due to the unique function the numeric keys lost sequencing. I suspect the array keys may be to blame or the array format you are spitting out.

POSSIBLE SOLUTION

I got it working when I tried using the values() function to reset the ARRAY keys.

PHP

$bases = ExchangePair::where('active', 1)->get()->pluck('base')->unique()->values()->toArray();

json_encode(['results' => $bases]);

JSON

{"results":[{"id":12,"text":"BTC"},{"id":120,"text":"456"},{"id":1,"text":"ETH"},{"id":119,"text":"USDT"},{"id":3,"text":"BNB"}]}

^ A quick note make sure your response on the chrome console looks like the line above meaning there are no numeric keys in front of each json object and the all the "results" are enclosed in an array.

Appendum:

I also had this problem when there were null values in my array. The above solution partially fixed it in that at first display of the options it would work when I started filtering it would not due to there being null values. Best of luck.

Comments

[VictorCH85]

Ok man! I removed the placeholder command and the error is not occurring. Thank you!

[Zeeshan]

I also faced the same issue, the documentation of select2 is still kind of poor.