可输入搜索查找自动过滤的下拉列表【原创】

头部仅需引入一个CSS样式即可，没有调用任何jquery库：

<link type="text/css" rel="stylesheet" href="css/style.css">

body部分主要是通过ul和li元素来实现列表的功能（当然，你也可以读取数据库生成列表），通过对ul进行样式增加和删除来控制列表的显示和隐藏：

<h1>可<span>输入搜索查找自动过滤</span>的下拉列表</h1>
  <form>
    <input class="chosen-value" type="text" value="" placeholder="输入内容自动过滤">
    <ul class="value-list">
      <li>阿里巴巴</li>
      <li>......</li>
      <li>滴滴出行</li>
    </ul>
  </form>

底部是纯JS写的，通过不同的选择器绑定了多个事件：click、focus、blur等，部分代码如下：

inputField.addEventListener('input', function () {
  dropdown.classList.add('open');
  var inputValue = inputField.value.toLowerCase();
  var valueSubstring = undefined;
  if (inputValue.length > 0) {
    for (var j = 0; j < valueArray.length; ++j) {
      if (valueArray[j].indexOf(inputValue) < 0) {
        dropdownItems[j].classList.add('closed');
      } else {
        dropdownItems[j].classList.remove('closed');
      }
      var closedNum = document.querySelectorAll('.closed').length;
    }
    if (closedNum == dropdownItems.length) {
      dropdown.classList.remove('open');
    }
  } else {
    for (var i = 0; i < dropdownItems.length; ++i) {
      dropdownItems[i].classList.remove('closed');
    }
  }
});

大家可以试着修改成以下的效果：