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

我正在使用一个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;
}

p、 div，输入{
字体：16px Calibri；
}
.ui自动完成{
光标：指针；
高度：120px；
溢出y：滚动；
}

以下是我导入的库：

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

我的浏览器中的控制台日志似乎没有任何错误

任何洞察都将不胜感激

试试这样的方法

归结起来就是，您不会将这些搜索结果存储在任何地方。我已经修改了异步函数的代码，以返回包含所有结果的完整数组（在所有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
  });
  });
} );

试试这样的

归结起来就是，您不会将这些搜索结果存储在任何地方。我已经修改了异步函数的代码，以返回包含所有结果的完整数组（在所有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")
});

var sourcearray=[]
var getData=函数（url）{
$.getJSON（url，函数（d）{
Array.prototype.push.apply（sourcearray，d.results）；
如果（d.next！=null）{
getData（d.next）；
}否则{
console.log（sourcearray）
变量配置={
最小长度：1，
资料来源：sourcearray，
焦点：功能（事件、用户界面）{
$（“#建议”）.val（ui.item.license_author）；
返回false；
},
选择：功能（事件、用户界面）{
$（“#建议”）.val（ui.item.license_author）；
返回false；
}
};
$（“#建议”）.autocomplete（配置）.autocomplete（“实例”）。_renderItem=函数（ul，项）{
返回$（“
”）.append（“+item.license\u author+”
“+item.description+”）.appendTo（ul）；
};
}
})
}
$（函数（）{
获取数据（“https://wger.de/api/v2/exercise/?format=json")
});

---

这里正在工作

我可以看到你的总成绩是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")
});

var sourcearray=[]
var getData=函数（url）{
$.getJSON（url，函数（d）{
Array.prototype.push.apply（sourcearray，d.results）；
如果（d.next！=null）{
getData（d.next）；
}否则{
console.log（sourcearray）
变量配置={
最小长度：1，
资料来源：sourcearray，
焦点：功能（事件、用户界面）{
$（“#建议”）.val（ui.item.license_author）；
返回false；
},
选择：功能（事件、用户界面）{
$（“#建议”）.val（ui.item.license_author）；
返回false；
}
};
$（“#建议”）.autocomplete（配置）.autocomplete（“实例”）。_renderItem=函数（ul，项）{
返回$（“
”）.append（“+item.license\u author+”
“+item.description+”）.appendTo（ul）；
};
}
})
}
$（函数（）{
获取数据（“https://wger.de/api/v2/exercise/?format=json")
});

这里有工作