头像

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

来源:http://www.sucaihuo.com/js/1982.html 素材火管理员 2017-05-20 18:17浏览(204) 收藏

一款相当实用的带输入搜索并自定过滤功能的下拉列表,点击输入框时下面会出现设定好的选择项,点击选择任意一个都会自动修改输入框的值,鼠标在输入框外点击时,自动隐藏下拉列表选项,输入内容时自动匹配并列出相关选项,细节功能请参考演示效果。
可输入搜索查找自动过滤的下拉列表
分类:导航菜单 > 下拉导航 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 1

手机扫码访问:

下载资源 下载积分: 88 积分

头部仅需引入一个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');
    }
  }
});

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

声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/1982.html
评论10
头像

友情提示:垃圾评论一律封号...

  • 头像 9楼
    05-24 10:50
    「The End」
    中文可以,英文不可以
    1
    richer

    中英文都可以自己改代码的,完全可以匹配中英文,英文时区分大小写都能做到,根据这个范例改就行的。

    2
    richer

    var inputValue = inputField.value.toLowerCase();
    上面这一行代码已经给出了方法了,试着自己改一下吧。

  • 头像 8楼
    05-24 10:49
    「The End」
    有个小bug,输入QQ的时候不显示关键字的下拉
  • 头像 7楼
    05-22 16:04
    hebe416
    样式好漂亮啊!可以用!!!
  • 头像 6楼
    05-21 17:27
    lzg80
    样式好漂亮啊!可以用
  • 头像 5楼
    05-21 12:01
    joyer
    功能强大界面漂亮!
  • 头像 4楼
    05-21 11:31
    toease
    样式好漂亮啊!
  • 头像 3楼
    05-21 10:48
    xyccp82
    实用的功能,收藏下
  • 头像 板凳
    05-21 10:19
    zenxiong88
    这个输入框可以
  • 头像 椅子
    05-20 23:28
    a51821064
    好牛波的效果!
  • 头像 沙发
    05-20 20:35
    不一样的烟火
    好牛波的效果
1 2