Javascript 如何将数据从分页API填充到HTML上的下拉输入？

我有一个API，它返回大约10.000条记录，它实现了分页返回，每次返回25条记录

现在，我想填充所有记录以选择HTML页面上的输入，目前我将ajax调用到API并解析JSON对象以附加选项。但由于API以页面形式返回，我不知道如何查询所有记录以向用户显示所有项，因为现在我只能显示25项

我的想法是在用户滚动到列表末尾时捕获事件，然后为下一页再次触发API调用，继续动态地将数据填充到下拉列表中，直到它到达最后一页。但我不知道怎么做，你们能帮我吗

这是我的密码

HTML

JS

var url=“API链接”；
var列表=[]；
$.get（url、函数（数据）{
if（data.success）{
列表=数据记录；
}否则{
console.log（“无可用数据”）；
}
});
var targetGeo=fragment.find（“.targetGeo”）；
targetGeo.empty（）；
targetGeo.append（$（“”）attr（“value”，“matchAll”）.text（“None”）；
列表.排序（函数（a，b）{
返回a.name.localeCompare（b.name）；
});
对于（变量i=0；i

您需要创建一个自定义下拉框来实现上述要求或插件。您无法使用标准的

来管理这一点，而下拉列表中的10000个条目是一场UX噩梦。考虑实现某种过滤搜索。在您提供的代码中，将所有代码放在<代码> .GET.<代码> >代码> <代码> >代码> >（数据，成功）< /代码>块中。更多信息请参见此处：@freedomn-m您能告诉我为什么要这样做吗？因为，简单地说，如果您打开一个包含10000个项目的下拉列表，找到您想要的项目将是一种极其可怕的体验（用户体验，UX）。必须一页一页地向下滚动才能找到你想要的。。。啊。这是一个如何激怒用户的好例子。

<div class="col-md-6 target-geo-holder">
  <select class="form-control target-geo">
  </select>
</div>

var url = "API Link";
var list = [];
$.get(url, function (data) {
     if (data.success) {
         list = data.records;
     } else {
         console.log("No data available");
     }
});
var targetGeo = fragment.find(".target-geo");
targetGeo.empty();

targetGeo.append($("<option />").attr("value", "matchAll").text("None"));

list.sort(function (a, b) {
    return a.name.localeCompare(b.name);
});
for (var i = 0; i < list.length; i++) {
     var item = list[i];
     var option = $("<option>").attr("value", item.id).text(item.name);
     targetGeo.append(option);
}