使用 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() {

  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

  });

  });

} );

Answer 2

我可以看到您的总结果数是 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")

});