由于业务需求，要实现 一个下拉框搜索功能。这个下拉功能和百度的还是有点区别的，百度的是时时与服务器交互的，而这个只是模拟。技术点在于实现 了搜索功能。

未搜索前如下图：

搜索后：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box{

            width: 200px;

            margin: 100px auto;

        }

        .select-box{

            width: 100%;

            overflow: hidden;

        }

        .select-dry{

                border: 1px solid #dddddd;

                height: 30px;

                line-height: 30px;

                color: #000;

                padding-left: 10px;

                background: white;

        }

        .select-dry input{

                border:0;

                outline:none;

        }

        .select-box .item{

                box-sizing:border-box;

                border: 1px solid #dddddd;

                width:100%;

                height: auto;

                color: #000;

                padding-left: 10px;

                background: white;

        }

        .select-box .item p{

            padding-right: 10px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="select-box" id="select-box">

        <div class="select-dry">

            <input type="text" id="ipt">

        </div>

        <div class="item-box" id="item-box">

        </div>

        <!--<div class="item"><p> MarkDown重写了这篇博客,欢迎移步到:Linux修</p></div>

        <div class="item">123123</div>

        <div class="item">123123</div>     -->

        <script>

            var datas = ['人','123','666','你好4','965','6','12','23','34','45','56','666'];

            var itemBox = document.getElementById("item-box");

            createList(datas);

            document.getElementById("ipt").addEventListener('input',function(e) {

               // console.log('e.target.value',e.target.value)

                var val = e.target.value;

                var arr = [];

                for(var i = 0;i<datas.length;i++){

                     if(datas[i].toString().indexOf(val.toString())!=-1){

                         console.log(datas[i])

                         arr.push(datas[i])

                     }

                }

                itemBox.innerHTML = '';

                createList(arr);

            });

            function createList(datas){

                for(var i = 0;i<datas.length;i++){

                    var newDom = document.createElement("div");

                    newDom.className = "item";

                    newDom.innerHTML = datas[i];

                    itemBox.appendChild(newDom);

                }

            }

        </script>

    </div>

    </div>

</body>

</html>

Sublime Text3自动保存的功能(失去焦点自动保存)

这是最新版本的Sublime Text3的设置方法 (三部曲);

第一步:preferences 下面的settings；(和老版本的不一样了吧,之前有什么default 和 users,这里只有settings)

第二步:现在分两边了,左边是只读的不能编辑,在左边ctrl + f ,然后在下面输入框里输入save_on_focus_lost,或者找185行

第三部:看下图就搞定了,复制这段代码到右边的框里,然后把false ,改成true 把true后面的逗号删掉,上面的一段代码结束加英文状态下的逗号就好,今后就不用ctrl+s了,舒心多了!

原生javascript实现 下拉框搜索功能的更多相关文章

  1. 使用jquery select2实现下拉框搜索功能

    由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2: ...

  2. BootStrap下拉框搜索功能

    <!DOCTYPE html> <html> <head> <title>jQuery bootstrap-select可搜索多选下拉列表插件-www. ...

  3. laravel7 jqAjax下拉框搜索

    html: 设置页面改变事件 <div id="show"> <div class="page-container" style=" ...

  4. 下拉框搜索插件chosen

    {% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. 原生js获取下拉框下标

    // 获取下拉框所选下标 传入下拉框的id function getselectscheckitemindex (idStr) { let o = document.getElementById(id ...

  6. DataTables给每一列添加下拉框搜索

    $(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this ...

  7. 纯原生javascript下拉框表单美化实例教程

    html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...

  8. table样式的下拉框（angularjs）

    前言 虽然使用的技术比较老了,但是思想却还是适用于现在的vue等框架. 一:实现的样式 二:实现包括的功能点 1:下拉框内容是表格,类似于一个弹窗 表格内容最多六行,超出的显示滚动条,表头固定,可滚动 ...

  9. jquery.editable-select 可编辑下拉框之获取select值和input值

    使用jquery.editable-select可以实现可编辑下拉框的功能,但需要先导入jquery.js,jquery.editable-select.css,jquery.editable-sel ...

随机推荐

  1. js变量传递

    基本类型.引用类型 基本类型: undefined.Null.Boolean.Number.String五种 (简单的数据段);引用类型: object (由多个值构成). 两种类型在使用上的区别: ...

  2. 《剑指offer》二叉树的深度

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  3. Bootstrap-datepicker3官方文档中文翻译---Keyboard support/键盘支持（原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html）

    本日期控件包含了键盘导航.  “focused date” 在键盘导航期间一直会被保持追踪并且高亮显示(就想鼠标悬停的时候一样),当一个日期被切换(译者注:选中状态的切换)时或者控件隐藏时清除. up ...

  4. 非root用户加入docker用户组省去sudo

    服务器环境:centos7.6.1810,Docker version 18.09.3 1.使用有sudo权限的帐号登录到服务器系统,如:test用户 2.新建用户组docker之前,查看用户组中有没 ...

  5. HashMap 和 Hashtable 的 6 个区别

    HashMap 是非常重要且常用的一种集合,还有一个和它类似的集合即Hashtable,有必要知道它们之间的区别. 1.线程安全: Hashtable 是线程安全的,HashMap 则不是线程安全的. ...

  6. PADS Layout VX.2.3 制作PCB封装（Decal）时，导入DXF文件

    操作系统:Windows 10 x64 工具1:PADS Layout VX.2.3 进入PCB封装编辑器(Decal Editor),点击Drafting Toolbar > Import D ...

  7. Windbg分析蓝屏Dump文件

    一.WinDbg是什么?它能做什么? WinDbg是在windows平台下,强大的用户态和内核态调试工具.它能够通过dmp文件轻松的定位到问题根源,可用于分析蓝屏.程序崩溃(IE崩溃)原因,是我们日常 ...

  8. Mysql常用30种SQL查询语句优化方法

    出处:http://www.antscode.com/article/12deee70111da0c4.html 1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使 ...

  9. 关于pom.xml文件中引入net.sf.json-lib出错问题

    关于pom.xml文件中引入net.sf.json-lib出错问题 在项目中引入以下依赖时一直报错 <dependency> <groupId>net.sf.json-lib& ...

  10. pyspark如何遍历broadcast

    因为论文关系要用到pyspark,具体情形如下: 有一个list=['aaa','bbb','ccc','ddd'],然后有一个rdd内数据类型是str,eg:'abcdefg',正常如果是需要筛选数 ...