如何使用纯 JavaScript 创建 ul li 自动完成输入 [关闭]答案

【问题标题】：how to create ul li autocomplete input using pure JavaScript [closed]如何使用纯 JavaScript 创建 ul li 自动完成输入 [关闭]
【发布时间】：2018-07-16 01:22:17
【问题描述】：

如何在没有 jquery 的情况下使用纯 javascript 创建 ul/li 自动完成输入。不要仅使用 ul/li 选项。

【问题讨论】：

您的输入和输出是什么？演示或示例怎么样？
这听起来很像您在寻求家庭作业的答案，这不是本网站的重点。如果您不是，请查看how to ask a good question. 并确保您遵循那里列出的建议。我们在这里帮助您解决代码的特定问题，而不是为您编写某些特定任务的所有代码。如果您已经尝试过一些事情，请发布您尝试过的代码，为什么您认为它有问题（如果您有任何理论），并就您遇到的问题提出一个具体问题。

标签： javascript html

【解决方案1】：

这是一个基本示例。你需要一个输入框和ul & li 来显示列表。使用数组filter方法查找与输入匹配的元素。

var listOfCountries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua &amp; Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus"]

function updateValue(inputText) {
  document.getElementById('suggestionList').innerHTML = ''
  var filterElement = listOfCountries.filter(function(item) {
    return item.indexOf(inputText) !== -1
  }).forEach(function(item) {
    var _li = document.createElement('li');
    var content = document.createTextNode(item);
    _li.appendChild(content);
    document.getElementById('suggestionList').appendChild(_li)
  })
}

<div>
  <input type="text" onkeyup="updateValue(this.value)">
  <ul id="suggestionList"></ul>
</div>

【讨论】：

非常感谢，这就是我要找的。你选择了同样的东西。 @brk