I am making an Ajax request to a music search API, using the jQuery autocomplete feature. The call works great, but I believe I have to do some Ajax adjustments/enhancements. The autocomplete feature seems to work great every time the space bar is clicked, which is quite odd?
If I type in the letters "lose", I get the full song list output to my console, but the dropdown suggestion box does not show, unless I hit the space bar, or if I hit the down arrow on my keyboard?
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,
})
},
})
}
}
});
}
Am I missing something in the Ajax request? Just seems like pretty odd functionality to me that the dropdown autocomplete suggestions seem to really only want to work when the spacebar or down arrow key is hit after typing?
Consider the following.
$(function() {
$(".song-input").autocomplete({
delay: 300,
source: function(request, response) {
var songSearch = request.term;
var songList = [];
$.ajax({
url: "https://deezerdevs-deezer.p.rapidapi.com/",
data: {
searchq: songSearch
},
method: "GET",
headers: {
"x-rapidapi-host": "deezerdevs-deezer.p.rapidapi.com",
"x-rapidapi-key": "APIkeyhere"
},
success: function(data) {
$.each(data.data, function(key, value) {
songList.push(value.song);
});
response(songList);
},
})
}
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
Search: <input type="text" class="song-input">
</div>This will assign Autocomplete to all Elements with class song-input. When the User enters a search term, request.term, it will be passed to the API and the results will be formatted into an Array. That array will be passed to response().
See More: https://api.jqueryui.com/autocomplete/#option-source
You're repeatedly setting up timers that don't actually debounce the typing. So the behavior of your done typing function isn't to actually detect when someone is done typing.
See this answer for more information: https://stackoverflow.com/a/57763036/637283