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

　　　　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. EnrichPipeline文档

    https://sourceforge.net/projects/enrichmentpipeline/

  2. Kendo UI中TreeView 放入tabstrip中，大数据量时超过边框的解决方案。

    参考http://www.kendoui.com/forums/ui/tabstrip/tabstip-with-treeview-treeview-breaking-out-of-tabstrip. ...

  3. 48 Fixing relationship Problems with Humor 用幽默解决人际关系问题

    48 Fixing relationship Problems with Humor 用幽默解决人际关系问题 ①We've all heard that laughter is the best me ...

  4. CF1096D Easy Problem(DP)

    题意:给出一个字符串,去掉第i位的花费为a[i],求使字符串中子串不含hard的最小代价. 题解:这题的思路还是比较套路的,    dp[i][kd]两维,kd=0表示不含d的最小花费,1表示不含rd ...

  5. 深浅 buffer

    var str = "深入浅出"; var buf = new Buffer(str, 'utf-8'); console.log(buf); 这种情况下是数字 var str = ...

  6. 检测Linux服务器端口是否开通

    现如今云服务器已经是大势所趋,国内比较著名的云服务器厂商有阿里.腾讯,国外有aws,尽管有的公司目前为止还是使用的物理机,但是无论你是使用的云服务器还是物理机,在运行服务时都必不可少的需要监听到指定的 ...

  7. Win10系统下编译GEOS3.6.2

    环境说明 1.Win10专业版.64位: 2.VS2012旗舰版: 3.cmake-3.9.0.64位: 资源准备 GEOS管网(http://trac.osgeo.org/geos)下载3.4.3版 ...

  8. jQuery中的AJAX的使用

    1.运用ajax()方法,比其它如load().get().post()全局性函数它更多地关注实现过程中的细节:首先要了解其参数列表: url: 要求为String类型的参数,(默认为当前页地址)发送 ...

  9. 项目笔记---事半功倍之StyleCop(一)

    前言 曾几何时,你是否在看别人代码的时候总是在抱怨代码没有注释,命名不规范,代码风格不统一,代码可读性差?是否有一个适合团队开发规范的检查工具? 答案就是大名鼎鼎的StyleCop代码检查插件,有了这 ...

  10. [JS] 数据双向绑定原理

    通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title" ...