使用 REST API 的下拉列表未显示（在控制台日志中显示）

Question

我正在使用一个包含练习名称的 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>

我的浏览器中的控制台登录似乎没有任何错误。

任何见解将不胜感激

Answer 1

试试这样的https://jsfiddle.net/voaf1sLg/。归根结底是您不会将这些搜索结果存储在任何地方。我已经修改了异步函数的代码，以返回包含所有结果的完整数组（在所有 33 个 API 调用之后，嗯！），然后返回带有所述自动完成条目的已履行承诺。相应地修改您的代码。async function getEx() {&nbsp; let url = 'https://wger.de/api/v2/exercise/?format=json'&nbsp; const array = [];&nbsp; while (url) {&nbsp; &nbsp; const res = await fetch(url)&nbsp; &nbsp; data = await res.json()&nbsp; &nbsp; for (const item of data.results) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(item.name)&nbsp; &nbsp; &nbsp; &nbsp; array.push(item.name);&nbsp; &nbsp; }&nbsp; &nbsp; url = data.next&nbsp; }&nbsp; return array;}$(function() {&nbsp; let tags = [];&nbsp; getEx().then(res => {&nbsp; &nbsp; $( "#tags" ).autocomplete({&nbsp; &nbsp; source: res&nbsp; });&nbsp; });} );

Answer 2

我可以看到您的总结果数是 685，如果我们能一口气完成这些记录，那就更好了。但如果不可能，那么我只需使用递归相应地修改您的代码。var sourcearray = []var getData = function(url) {&nbsp; &nbsp; $.getJSON(url, function(d) {&nbsp; &nbsp; &nbsp; &nbsp; Array.prototype.push.apply(sourcearray, d.results);&nbsp; &nbsp; &nbsp; &nbsp; if (d.next != null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; getData(d.next);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(sourcearray)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var config={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minLength: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: sourcearray,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; focus: function(event, ui) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#suggest").val(ui.item.license_author);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; select: function(event, ui) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#suggest").val(ui.item.license_author);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#suggest").autocomplete(config).autocomplete("instance")._renderItem = function(ul, item) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return $("<li>").append("<div>" + item.license_author + "<br>" + item.description + "</div>").appendTo(ul);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })}$(function() {&nbsp; &nbsp; getData("https://wger.de/api/v2/exercise/?format=json")});