Autocomplete not narrowing on search.

[GrumpyCrouton]

I'm attempting to use the autocomplete feature using jquery-ui.

When I type in the box, the autocomplete menu pops up, but the results are never filtered. No matter what is typed, all of the results stay in the dropdown (picture attached).

Here is my code:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>

(I am also using bootstrap, which is declared elsewhere)

<input type="text" class="form-control" id="tokenfield" />

<script>
$('#tokenfield').tokenfield({
    autocomplete: {
        source: function (request, response) {
            jQuery.get("assets/data.php", {
                query: request.term
            }, function (data) {
                data = $.parseJSON(data);
                response(data);
            });
        },
    delay: 100
    },
    showAutocompleteOnFocus: true
});
</script>

(I'm attempting to use a dynamic json list, based in php)

<?php

    $json = array("red", "yellow", "blue");

    echo json_encode($json);

?>

Any help with this would be much appreciated.