javascript - 使用来自 Javascript 数据库的数据创建自动完成下拉列表

Question

我想创建一个小型 Web 应用程序，其中包含使用 Javascript 搜索电影的功能。我想在搜索电影名称时，该函数完成其余部分。但是我做不到。

例如:

我写了“bat”，函数完成了“man”。这就像谷歌搜索。我写了“堆栈”，谷歌在下拉列表中完成了“溢出”。

所以这是我的脚本代码:

var dataList = document.getElementById('json-datalist');

var input = document.getElementById('ajax');

var request = new XMLHttpRequest();

request.onreadystatechange = function(response) {
if (request.readyState === 4) {

  var jsonOptions = JSON.parse(request.responseText);

  jsonOptions.forEach(function(item) {

    var option = document.createElement('option');

    option.value = item;

    dataList.appendChild(option);
  });
 else {

  input.placeholder = "Couldn't load datalist options ";
  }
 }
};

request.open('GET', 'url', true);
request.send();

HTML代码:

    <form>
       <p> Movie name: </p>
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. Spider-Man">
<datalist id="json-datalist"></datalist>

Answer 1

我已经验证上面的代码工作正常。现在，您从服务器发送数据的方式可能存在问题。

问题可能出在下一行。

option.value = item;

检查你的 json 对象，你是如何发回数据的。例如，如果对象中有一个属性，那么您应该如下使用它；

option.value = item.value; => name of element