我正在向一個音樂搜索API發出Ajax請求，使用jQuery的自動完成功能。這個呼叫作業得很好，但我相信我必須做一些Ajax的調整/增強。每次點擊空格鍵時，自動完成功能似乎都能很好地作業，這很奇怪。
如果我輸入字母 "lose"，我就會在我的控制臺中得到完整的歌曲串列輸出，但是下拉建議框卻沒有顯示，除非我點擊空格鍵，或者我點擊鍵盤上的向下箭頭？
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請求中錯過了什么？對我來說，下拉式自動完成建議似乎真的只想在輸入后按下空格鍵或向下箭頭鍵時發揮作用，這似乎是非常奇怪的功能？
uj5u.com熱心網友回復：
你在重復設定計時器，而這些計時器實際上并沒有對打字進行減震。所以你的打完字功能的行為并不是真正地檢測某人何時打完字。
更多資訊請參見此答案。https://stackoverflow.com/a/57763036/637283
uj5u.com熱心網友回復：
考慮以下情況。
。$(function() {
$(".song-input").autocomplete({
delay: 300,
source: function(request, response) {
var songSearch = request.term;
var songList = [];
$.ajax（{
url: "https://deezerdevs-deezer.p.rapidapi.com/"/span>,
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="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">/span>
<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>/span>
搜索。< input type="text" class="song-input">/span>
</div>/span>這將為所有具有song-input類的元素分配自動完成功能。當用戶輸入一個搜索詞，request.term，它將被傳遞給API，結果將被格式化為一個陣列。該陣列將被傳遞給response()。
查看更多。https://api.jqueryui.com/autocomplete/#option-source
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/306715.html
標籤：
上一篇：當給定最大寬度時，如何保持比例？