Primero, estoy tratando de activar la búsqueda de objetos json en el evento de cambio. Luego use ese objeto json en la función de autocompletar. Este es el código que he escrito hasta ahora, el problema al que me enfrento es que el objeto json solo se obtiene después de hacer clic fuera del cuadro de texto. Además, el objeto json que recibo es una matriz de matrices con dos valores que aplané usando flatmap(). Sé que estoy tratando de hacer muchas cosas a la vez, pero creo que esto debería ser posible. Esto es lo que tengo hasta ahora.

 $(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'); });

Y el html es el siguiente

 <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>