Estoy haciendo una solicitud Ajax a una API de búsqueda de música, utilizando la función de autocompletar de jQuery. La llamada funciona muy bien, pero creo que tengo que hacer algunos ajustes/mejoras de Ajax. La función de autocompletar parece funcionar muy bien cada vez que se hace clic en la barra espaciadora, ¿lo cual es bastante extraño?

Si escribo las letras "perder", obtengo la salida de la lista de canciones completa en mi consola, pero el cuadro de sugerencias desplegable no aparece, a menos que presione la barra espaciadora o presione la flecha hacia abajo en mi teclado.

 function songSelection() { $(".song-input").each(function () { let input = $(this); if (input.next() == 'SongSelector') { let timer; input.on('keydown', function () { timer = setTimeout(doneTyping, 300); }); function doneTyping() { let songSearch = input.val() $.ajax({ url: `https://deezerdevs-deezer.p.rapidapi.com/searchq=${songSearch}`, method: "GET", headers: { "x-rapidapi-host": "deezerdevs-deezer.p.rapidapi.com", "x-rapidapi-key": "APIkeyhere" }, success: function (data) { let songList = [] for (let item in data.data) { songList.push(data.data[item].song) } $('.song-input').autocomplete({ source: songList, }) }, }) } } }); }

¿Me estoy perdiendo algo en la solicitud de Ajax? Me parece una funcionalidad bastante extraña que las sugerencias desplegables de autocompletar parecen realmente solo querer funcionar cuando se presiona la barra espaciadora o la tecla de flecha hacia abajo después de escribir.