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

　　　　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. 用个体软件过程(PSP)记录你的工作

    用个体软件过程(PSP)记录你的工作 首先,非常感谢大家对本门课程的学习所投入的时间和精力. 其次,已经进入数据时代,口说无凭,拿数据来.如果你认为你已经投入了大量精力在这门课程的学习和作业中,而且已 ...

  2. 2018.08.20 loj#115. 无源汇有上下界可行流（模板）

    传送门 又get到一个新技能,好兴奋的说啊. 一道无源汇有上下界可行流的模板题. 其实这东西也不难,就是将下界变形而已. 准确来说,就是对于每个点,我们算出会从它那里强制流入与流出的流量,然后与超级源 ...

  3. Unit Testing of Spring MVC Controllers1

    我们的pom.xml文件相关的部分看起来如下: <dependency>    <groupId>com.fasterxml.jackson.core</groupId& ...

  4. vivado用法

    声明为”DEBUG”,即使没有连接到其他模块,也不会被优化掉.但并不是所有的信号都是在声明为“debug”属性之后就不会优化掉. (2)同一个bank中能设置一个电平. (3)

  5. VHDL数据类型

    VHDL表示16进制 如 a : std_logic_vector(7 downto 0) 把0x55赋给a a <= x"55"; b表示二进制 b“1011_1111” ...

  6. 201709012工作日记--Android消息机制

    1. android的消息机制——Handler机制 参考:http://www.jianshu.com/p/9e4d1fab0f36. Android异步消息处理机制完全解析,带你从源码的角度理解: ...

  7. Oracle定义DES加密解密及MD5加密函数

    http://blog.csdn.net/xdweleven/article/details/38319351   (1)DES加密函数create or replace functionencryp ...

  8. ABP 基础设施层——集成 NHibernate

    本文翻译自ABP的官方教程<NHibernate Integration>,地址为:http://aspnetboilerplate.com/Pages/Documents/NHibern ...

  9. c# readkey readline read 区别

    Console.read().Console.readline().Console.readkey()和Console.Write.Console.Writeline()的区别 Console.rea ...

  10. BitAdminCore框架更新日志20180529

    索引 NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/coo ...