How do I use Jquery UI autocomplete with dynamically fetched json object triggered by change event

Question

First, I am trying to trigger the json object fetch on change event. Then use that json object in the autocomplete feature. This is the code I have written so far, the problem I am facing is that the json object only gets fetched after I click out of the text box. Also the json object I receive is an array of array with two values which I flattened out using flatmap(). I know I am trying to do a lot at once, but I think this should be possible. This is what I have so far.

    $(document).ready(function() {
    $( "#username" ).bind('change',function() {
        var userVal = $( this ).val();
        var dict = [];
        url= '/someurl/json_service?q=' + userVal;
        $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            const output = data.flatMap(a => a.map(b => b[0]));
            $.each(output, function() {
            dict.push(this.toString());
            });
            return dict;
        }
        });
        console.log(dict);
        $('#username').autocomplete({
            source: dict
        });
    });
    $("#username").trigger('change');
});

And the html is as follows

   <tr>
     <th class='bb' align='right'>Buyer Username:</th>
     <td class='bb  ui-widget'><input type='text' name='username' value='[username]' id="username"> &nbsp;<a href="/website/users" target="B_BLANK">Find User &raquo;</a></td>
    </tr>