![](/img/trans.png)
[英]having issues while trying to populate second drop down-list dynamically using AJAX
[英]Drop down-list using REST API not showing (does in console log)
我正在使用一個帶有練習名稱的 api。 我想制作一個帶有自動完成下拉菜單的搜索框(就像谷歌在完成你輸入的內容之前給你的建議)但我想使用 api 作為結果。
我設法從 api 中獲取讀數。
let data;
async function getExercises () {
let url = 'https://wger.de/api/v2/exercise/?format=json'
while (url) {
const res = await fetch(url)
data = await res.json()
for (const item of data.results) {
console.log(item.name)
}
url = data.next
}
$(document).ready(function() {
BindControls();
});
function BindControls() {
$('#exercise-search').autocomplete({
source: data,
minLength: 0,
scroll: true
}).focus(function() {
$(this).autocomplete("search", "");
});
}
}
我正在嘗試使用 api 結果進行下拉,但無法使其正常工作。
<input id="exercise-search" class="form-control" type="text" name="data">
p, div, input {
font: 16px Calibri;
}
.ui-autocomplete {
cursor:pointer;
height:120px;
overflow-y:scroll;
}
這些是我導入的庫:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
我瀏覽器中的控制台登錄似乎沒有任何錯誤。
任何見解將不勝感激
嘗試這樣的事情https://jsfiddle.net/voaf1sLg/ 。
它歸結為您不會將這些搜索結果存儲在任何地方。 我已經修改了異步函數的代碼以返回包含所有結果的完整數組(在所有這些 33 個 API 調用之后,嗯!),然后返回帶有所述自動完成條目的已履行承諾。 相應地修改您的代碼。
async function getEx() {
let url = 'https://wger.de/api/v2/exercise/?format=json'
const array = [];
while (url) {
const res = await fetch(url)
data = await res.json()
for (const item of data.results) {
console.log(item.name)
array.push(item.name);
}
url = data.next
}
return array;
}
$(function() {
let tags = [];
getEx().then(res => {
$( "#tags" ).autocomplete({
source: res
});
});
} );
我可以看到你的總結果數是 685,如果我們能一次性完成這些記錄就更好了。 但如果不可能,那么我只是使用遞歸相應地修改您的代碼。
var sourcearray = []
var getData = function(url) {
$.getJSON(url, function(d) {
Array.prototype.push.apply(sourcearray, d.results);
if (d.next != null) {
getData(d.next);
} else {
console.log(sourcearray)
var config={
minLength: 1,
source: sourcearray,
focus: function(event, ui) {
$("#suggest").val(ui.item.license_author);
return false;
},
select: function(event, ui) {
$("#suggest").val(ui.item.license_author);
return false;
}
};
$("#suggest").autocomplete(config).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>").append("<div>" + item.license_author + "<br>" + item.description + "</div>").appendTo(ul);
};
}
})
}
$(function() {
getData("https://wger.de/api/v2/exercise/?format=json")
});
這是工作小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.