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

未搜索前如下图：

搜索后：

<!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. 如何隐藏nginx版本号

    vi /etc/nginx/nginx.conf 配置文件中,http区段中插入“server_tokens  off;”,重新载入配置文件 worker_processes 1; events { ...

  2. JpaManytoMany

    package com.allqj.calculator.entity; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; i ...

  3. C# Post方式下，取得其它端传过来的数据

    // Post方式下,取得java端传过来的数据 if ("post".Equals(context.Request.HttpMethod.ToLower())) { contex ...

  4. Scrapy 扩展中间件: 针对特定响应状态码，使用代理重新请求

    0.参考 https://doc.scrapy.org/en/latest/topics/downloader-middleware.html#module-scrapy.downloadermidd ...

  5. C++ this指针

    成员函数不能定义 this 形参,而是由编译器隐含地定义.成员函数的函数体可以显式使用 this 指针,但不是必须这么做.如果对类成员的引用没有限定,编译器会将这种引用处理成通过 this 指针的引用 ...

  6. LOJ#3043.【ZJOI2019】 线段树 线段树,概率期望

    原文链接www.cnblogs.com/zhouzhendong/p/ZJOI2019Day1T2.html 前言 在LOJ交了一下我的代码,发现它比选手机快将近 4 倍. 题解 对于线段树上每一个节 ...

  7. Map接口下的集合和泛型理解

    一.Map接口 1. Map接口就是最顶层了,上面没有继承了.Map是一个容器接口,它与前面学的List.Set容器不同的是前面学的这些容器,一次只能传入一个元素,但是Map容器一次可以传入一对元素( ...

  8. PLS：利用PLS(两个主成分的贡献率就可达100%)提高测试集辛烷值含量预测准确度并《测试集辛烷值含量预测结果对比》—Jason niu

    load spectra; temp = randperm(size(NIR, 1)); P_train = NIR(temp(1:50),:); T_train = octane(temp(1:50 ...

  9. Maven导入项目时报错 Could not calculate build plan

    Could not calculate build plan: Plugin org.apache.maven.plugins:maven-war-plugin:2.2 or one of its d ...

  10. 教你如何用勾勾街快速生成一个苹果IOS APP

    现在苹果手机上的各种各样的APP,想不想也有一款属于自己的专属APP?很简单,用勾勾街可以在3分钟内快速制作一款,快来看看! 工具平台: 勾勾街 (www.gogojie.com ) 操作方法: 1. ...