Question

我想创建一个小型Web应用程序，其中包含一个用Javascript搜索电影的功能。我希望在搜索电影的名字时，该功能完成其余的单词。但我无法做到。

例如：

我写了＃34; bat＆＃34;并且功能完成了＃34; man＆＃34;。这就像谷歌搜索。我写了＃34; stack＆＃34;和谷歌完成＆＃34;溢出＆＃34;在下拉列表中。

所以这是我的脚本代码：

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

    <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

创建自动完成下拉列表，数据来自Javascript中的数据库

1 个答案: