jQuery 自动完成 + ajax API 仅调用 spacebar/down 箭头上的触发器列表？

Question

我正在使用 jQuery 自动完成功能向音乐搜索 API 发出 Ajax 请求。通话效果很好，但我相信我必须做一些 Ajax adjustments/enhancements。每次单击 space 条时，自动完成功能似乎都很好用，这很奇怪？

如果我输入字母“lose”，我会将完整的歌曲列表输出到我的控制台，但下拉建议框不会显示，除非我点击 space 栏，或者如果我点击我键盘上的向下箭头？

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,
                        })

                    },
                })
            }
        }
    });
}

我在 Ajax 请求中是否遗漏了什么？对我来说这似乎是一个非常奇怪的功能，下拉自动完成建议似乎真的只希望在键入后按下 space 栏或向下箭头键时工作？

Answer 1

您重复设置的计时器实际上并没有消除输入的抖动。因此，完成输入功能的行为并不是实际检测某人何时完成输入。

有关详细信息，请参阅此答案：

Answer 2

考虑以下因素。

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

这会将自动完成分配给具有 class song-input 的所有元素。当用户输入搜索词 request.term 时，它将被传递到 API，结果将被格式化为一个数组。该数组将传递给 response().

查看更多：https://api.jqueryui.com/autocomplete/#option-source

jQuery 自动完成 + ajax API 仅调用 spacebar/down 箭头上的触发器列表？

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

javascript

ajax

jquery

jquery-ui-autocomplete