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

未搜索前如下图：

搜索后：

<!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. 2019年Python、Golang、Java、C++如何选择？

    前言 作为开发者我们都知道,开发后台语言可选择的方向会很多,比如,Java,go,Python,C/C++,PHP,NodeJs….等很多,这么多语言都有什么样的优势?如果让你学习一门后端语言,又该如 ...

  2. trie上记忆化搜索，括号匹配——cf1152D好题！

    一开始以为是卡特兰数的性质,,后来发现其实是dp,但是用记忆化搜索感觉更方便一点先来考虑字典树上的问题 设要求的序列长度是2n,我们用二元组(a,b)来表示前面长为a的序列中出现的 '(' - ')' ...

  3. 2018-2019-3 20165314《网络对抗技术》Exp2 后门原理与实践

    1.实验内容 任务一:使用netcat获取主机操作Shell 1.在Windows下使用ipconfig查看本机IP: 2.使用ncat.exe程序监听本机的5314端口: 3.在Kali环境下,使用 ...

  4. UMeditor控制多张图片上传顺序

    多张图片上传的顺序,受到用户使用习惯.插件上传和插件插入页面顺序的影响. 估计是考虑到上传性能,官方没有提供UMeditor控制展示顺序的配置.在上传过程中,用户点击拖动的第一张图片,将作为文件数组中 ...

  5. log4j配置，输出sql到控制台

    网上的 # Global logging configuration log4j.rootLogger=ERROR, stdout # log4j.logger后面跟着的是项目dao包路径,里面全部都 ...

  6. C. mathematican 的二进制

    题解: subtask1:爆搜,没状压dp的分 subtask2,3:统计有几个操作就好了,分治ntt优化 subtask4,5: 发现和操作顺序无关,然后我们考虑用分治ntt优化 每个的贡献是$n+ ...

  7. Cocos Creator中使用事件中心

    export class EventCenter { /** 监听数组 */ private listeners = {}; /** * 注册事件 * @param name 事件名称 * @para ...

  8. 使用python来操作redis用法详解

    1.redis连接 redis提供两个类Redis和StrictRedis用于实现Redis的命令,StrictRedis用于实现大部分官方的命令,并使用官方的语法和命令,Redis是StrictRe ...

  9. CF1013B And

    There is an array with n elements a1, a2, ..., an and the number x. In one operation you can select ...

  10. leetcode刷题第三天<无重复字符的最长子串>

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 : 输入: "abcabcbb" 输出: 解释: 因为无重复字符的最长子串是 . 示例 : 输入: &quo ...