jQuery autocomplete + ajax API call only triggers list on spacebar/down arrow?

Question

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?

Everyone always seems to try and get the source before initializing autcomplete. Just get the data in the Source callback function. — Twisty, Sep 15 '21 at 21:05

Twisty · Accepted Answer · 2021-09-15T21:29:32.250

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

Oh wow thank you, this was awesome! I never used a remote data source when using autocomplete. I see that the "source" is a requirement when querying a remote data source that is constantly changing? — master_j02, Sep 16 '21 at 15:48
@master_j02 the Source is called each time a User triggers a "search". So if there is an update to the Data, it will be reflected right away. — Twisty, Sep 16 '21 at 16:18

score 0 · Answer 2 · answered Sep 15 '21 at 21:01

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

jQuery autocomplete + ajax API call only triggers list on spacebar/down arrow?

2 Answers2

Linked