头像

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

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

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

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

查看演示 下载资源: 4

手机扫码访问:

下载资源 下载积分: 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
评论15
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 14楼
    10-17 16:57
    我爱编程
    非常漂亮
  • 头像 13楼
    08-29 15:48
    lixu123
    样式非常漂亮,谢谢分享
  • 头像 12楼
    08-29 15:32
    lixu123
    太完美了
  • 头像 11楼
    08-11 10:11
    777777
    这个需要
  • 头像 10楼
    08-04 19:32
    lily28
    这个喜欢,谢谢。
  • 头像 9楼
    06-30 14:42
    jackietest
    样式很漂亮,先收藏,在研究
  • 头像 8楼
    05-24 10:50
    「The End」
    中文可以,英文不可以
    1
    richer

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

    2
    richer

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

  • 头像 7楼
    05-22 16:04
    hebe416
    样式好漂亮啊!可以用!!!
  • 头像 6楼
    05-21 17:27
    lzg80
    样式好漂亮啊!可以用
  • 头像 5楼
    05-21 12:01
    joyer
    功能强大界面漂亮!
1 2