如何使用AJAX提取的数据在HTML/XHTML中创建自动完成功能

Question

我的项目在JSF2上，我正试图从服务器中提取一些引用数据，以便在前端的输入(文本(字段中使用。

使用以下链接作为的起点

https://www.w3schools.com/howto/howto_js_autocomplete.asp

我不想使用固定值数组(Strings(，而是想从服务器动态获取数据。这是我试图实现目的的代码：

var constituencies;
function retrieveConstituencies(){
/* Load constituencies dynamically */  
var mde=document.getElementById("mode").value;
alert("mode is "+mde);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
constituencies = this.responseText;
alert(constituencies);
}
};
xhttp.open("GET", "/NominateServlet?mode="+mde, true);
xhttp.send();

}

这是我调用自动完成函数的最后一段代码(类似于上面提供的链接中的示例(

autocomplete(document.getElementById("vsInput"), constituencies);

在过去的3天里，我一直被这个问题困扰着，而autocomplete方法就是不接受AJAX值。如果有人对此有解决方案，请分享。

附言：我不使用PrimeFaces或JQuery，因为我想使用普通技术。

非常感谢

Answer 1

XMLHttpRequest生成异步请求。"；自动完成"；函数在请求完成之前被调用；选区"；变量已设置。你应该把"；自动完成"；在对API的请求完成之后。尝试如下：

if (this.readyState === 4 && this.status === 200) {
const items = JSON.parse(this.responseText);
const input = document.getElementById("vsInput");

autocomplete(input, items);
}