由于在优化项目中，发现先前写的一个活化石级的的可搜索下拉功能在高速搜索中会出现卡顿现象

　　　　1.起初的解决方法是在搜索事件中加入防抖函数隔一段时间才去触发他，同时搜索的不再是html文档片段，而是直接对数据做筛选，再次放入搜索的下拉容器内

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>可搜索下拉</title>

</head>

<body>

    <input type="search" class="search" id="city" placeholder="输入省会或直辖市名称" />

    <label class="datalist" for="city">

       //搜索下拉容器

    </label>

　　

    <script>
　　　　var testSearchData = [
　　　　　　　　{name:'上海'，value:2205}
　　　　　　　　...
　　　　　　];
　　　　　
　　　　//数据处理函数
　　　　function datas(search){
　　　　　　var htmls = [];
　　　　　　for(var i=0 ; i<testSearchData.length ;i++){
　　　　　　　　
　　　　　　　　　if(testSearchData[i].name.indexOf(search)!=-1){
　　　　　　　　　　　　htmls.push(`<div class="list" data-index="${testSearchData[i].name}" data-value="${testSearchData[i].value}" >${testSearchData[i].name}</div>`);
　　　　　　　　　}
　　　　　　}
　　　　　　return htmls ;
　　　　}

　　　//防抖函数
　　　　function debounce(fn) {
　　　　　　var timeout = null;
　　　　　　return function () {
　　　　　　　　clearTimeout(timeout);
　　　　　　　　timeout = setTimeout(function () {
　　　　　　　　　　fn();
　　　　　　　　}, 300)
　　　　　　};
　　　　}

　　　　//初始化数据填充　　　　
　　　　$(.datalist').append(htmls.join());
　　　　$('#city').keyup(function(){
　　　　　　　　　　
　　　　　　　　var sVal = this.value || '' ;
　　　　　　　　debounce(function(sVal){
　　　　　　　　　　$('.datalist').append(datas(sVal).join());
　　　　　　　　})
　　　　})
　　　　//之后的选择事件省略.....PS：自由发挥  ，这段只是思维示例代码  代码可进一步优化

</script> </body> </html>

　　　　2.后来在阅读张鑫旭大大的博客时无意发现了鑫大写的一篇利用css属性利用障眼法来做可搜索下拉，相比纯JS来控制显示隐藏性能提升不少

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>可搜索下拉</title>

</head>

<body>

    <input type="search" class="search" id="city" placeholder="输入省会或直辖市名称" />

    <label class="datalist" for="city">

        <div class="list" data-index="重庆市chongqing">重庆市</div>

        <div class="list" data-index="哈尔滨市haerbing">哈尔滨市</div>

        <div class="list" data-index="长春市changchun">长春市</div>

        <div class="list" data-index="兰州市lanzhou">兰州市</div>

        <div class="list" data-index="北京市beijing">北京市</div>

        <div class="list" data-index="杭州市hangzhou">杭州市</div>

        <div class="list" data-index="长沙市changsha">长沙市</div>

        <div class="list" data-index="沈阳市shenyang">沈阳市</div>

        <div class="list" data-index="成都市chengdu">成都市</div>

    </label>

    <script>

        var eleStyle = document.createElement("style"),

            eleInput = document.querySelector("#city");

        // 用来CSS控制的style插入

        document.querySelector("head").appendChild(eleStyle);

        // 文本框输入

        eleInput.addEventListener("input", function () {

            var val = this.value.trim().toLowerCase();

            if (val !== '') {

                eleStyle.innerHTML = '.list:not([data-index*="' + this.value + '"]) { display: none; }';

            } else {

                eleStyle.innerHTML = '';

            }

        });

    </script>

</body>

</html>

　　

　　　　 3.还一种个人认为对性能十分不友好就阐述下大概思路

　　　　　　1.对于前后端不分离项目例如 php 的tp框架将下拉内容直接volist出来

　　　　　　2.我们可通过js控制每个属性的显示隐藏，通过内联css，将其dispaly:none; pS:因这里需要大量遍历读写DOM 个人觉得对性能损耗比较大（不推荐）

实现可搜索仿select下拉选中的更多相关文章

  1. select 下拉选中

    <body> <select name="" id=""> <option value="">张三< ...

  2. 仿select下拉框

    默认状态下,灰色面板出现.当点击页面按钮以及灰色面板外区域时,面板消失;点击按钮,灰色面板出现;点击灰色面板区域,面板不能消失. 主要考察:事件冒泡与取消事件冒泡. 代码: <!DOCTYPE ...

  3. 事件冒泡 --- 仿select下拉框

    要求:点击按钮时,下拉框显示:点击页面其他部分时,下拉框消失: 1. 不靠谱代码 <!DOCTYPE html> <html> <head lang="en&q ...

  4. select下拉选中显示对应的div隐藏不相关的div

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  6. jquery操作select下拉框的多种方法(选中,取值,赋值等)

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

  7. 带搜索框的select下拉框

    利用select2制作带有搜索功能的select下拉框 1.引入线上css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/ ...

  8. LayUI中select下拉框选中触发事件

    代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...

  9. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

随机推荐

  1. java如何实现以数据流的形式下载压缩包到本地?

    先不多说,直接贴代码吧,在服务器的E盘下放一个E:/manual.rar的压缩包 package com.cellstrain.icell.controller; import org.springf ...

  2. hdu-1173（最短距离）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1173 思路:最短距离:就是现将x,y从小到大排序,然后去中间点就行了.(注意:本题答案不唯一) #in ...

  3. hadoop学习笔记（四）：hdfs常用命令

    一.hadoop fs 1.创建目录 [root@master hadoop-]# hadoop fs -mkdir /testdir1 [root@master hadoop-]# hadoop f ...

  4. 初探Java反射机制

    反射库提供了一个非常丰富且精心设计的工具集,以便编写能够动态操纵java代码的程序库.这项功能被大量地应用于JavaBeans中.反射机制提供了在运行状态中获得和调用修改任何一个类的属性和方法的能力. ...

  5. gj5 自定义序列类

    5.1 序列类型的分类 容器序列  list.tuple.deque扁平序列[同一种数据类型]  str.bytes.bytearray.array.array可变序列  list, deque,by ...

  6. HDU 1197 Specialized Four-Digit Numbers （枚举+进制转化，简单）

    题意:让求从2992-9999中所有数字,满足10进制各位之和和12进制和16进制各位数字之和相等. 析:没啥可说的,只能枚举从2992-9999,每个进制都算一下. 代码如下: #include & ...

  7. hbase使用MapReduce操作1（基本增删改查）

    操作代码 import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.*; import org.apach ...

  8. 简便方法搞定第三方SDK的Jar包在DelphiXE5中的引入

    简便方法搞定第三方SDK的Jar包在DelphiXE5中的引入 (2014-02-21 17:30:17) 转载▼ 标签: android delphi xe5 jar sdk 分类: 编程杂集 折腾 ...

  9. 执行Docker命令报错解决办法

    shim error: docker-runc not installed on system   服务器重启以后,执行docker命令报以上错误,解决办法如下: cd /usr/libexec/do ...

  10. Intellij Idea 14编译golang 插件

    最近项目实在太赶了,很久没有写过博文了. 公司新配了一台笔记本电脑,原装win8的.于是又从linux回到了windows.不想用win命令行来搞go了,win下太折腾了.还是用一直使用的idea. ...