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

未搜索前如下图：

搜索后：

<!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. FhqTreap的区间翻转

    学 Fhq 就是为了尽量不去写某毒瘤数据结构,所以自然要来杠一杠某数据结构的经典操作:区间反转 听起来玄乎,但只需要一个小 trick 就行了:把原来的区间以下标作为权值建成 Treap , 这样整棵 ...

  2. RROR: [XSIM 43-3238] Failed to link the design.

    仿真时遇到上述错误,在tcl下运行 set_property -name {xsim.elaborate.xelab.more_options} -value {-cc clang} -objects ...

  3. python 对Excel表格的写入

    python对Excel表格写入需要导入xlrd ,和xlutils两个库 from xlrd import open_workbook from xlutils.copy import copy o ...

  4. MySQL数据库快速造大量数据

    这段时间做性能测试,发现数据都是分库写进数据库了,并且要构造大量数据,大概4000万的数据量,用普通的方法,写个MySQL函数,之前测试过,大概200万数据也要跑一个多小时,太慢了. 后面研究发现有个 ...

  5. JSP（二）：JSP九大内置对象、四个作用域对象

    jsp的九大内置对象:        内置对象:            jsp文件在转译成其对应的Servlet文件的时候自动生成的并声明的对象.我们在jsp页面中直接使用即可.        注意: ...

  6. Angular6 用户自定义标签开发

    参考地址:https://www.jianshu.com/p/55e503fd8307

  7. C++何时需要NEW对象，new和定义对象的区别

    C++何时需要NEW对象 一.CString str; 不用new的内存区域是在栈,会自动分配空间,一般在局部变量时使用,函数结束后会自动释放空间, 定义对象就是申明对象(静态) str有系统创建并释 ...

  8. 问题之Spring MVC配置后，可以打开jsp页面，但打不开html页面

    一.配置Spring MVC 1.导入jar spring框架:http://repo.spring.io/release/org/springframework/spring/ spring-fra ...

  9. 计蒜客 踏青 dfs

    题目: https://www.jisuanke.com/course/2291/182234 思路: 紫书P163联通块问题. 1.遍历所有块,找到草地,判断合法性,合法其id值加一,最后加出来的i ...

  10. CF.802C.Heidi and Library (hard) (费用流zkw)

    题目链接 复习了下餐巾计划问题.全忘了=-= 首先这是一道网络流.然后本题有\(n\)种建图方法,以及\(smy\) dalao还有单纯形做法. 先假设所有物品都是买入的.那么对于每一天,拆成两个点\ ...