如何使用纯JavaScript创建ul li自动完成输入

Question

如何使用纯javascript创建ul / li自动完成输入而不使用jquery.do不能仅使用选项ul / li。

Answer 1

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

＆＃13;

＆＃13;

var listOfCountries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua & 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)
  })
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;