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

　　　　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. CountVectorizer()类解析

      主要可以参考下面几个链接: 1.sklearn文本特征提取 2.使用scikit-learn tfidf计算词语权重 3.sklearn官方中文文档 4.sklearn.feature_extra ...

  2. 37 The Benefits of Cutting Salt 减少盐分摄取量的益处

    The Benefits of Cutting Salt 减少盐分摄取量的益处 ①Just when you had figured out how to manage fat in your die ...

  3. Criteria查询

    1.Criteria表达式 Criteria c=session.createCriteria(User.class); List result=c.list(); Iterator it=resul ...

  4. 疯狂安装oracle 12c，此版本没有scott这个用户

    今天要学习oracle,然后寻思下个吧,结果出现了很多问题,在此分享一下,搞疯了,太痛苦了,学的教程是用的 Oracle 11g,我去官网下载的Oracle 12g,文件很大,好不容易装好了,寻思就这 ...

  5. 配置 cxf-rs spring bean 文件

    http://cxf.apache.org/schemas/jaxrs.xsd http://cxf.apache.org/docs/restful-services.html 示例: <?xm ...

  6. Oracle实例名,服务名等概念区别与联系

    数据库名.实例名.数据库域名.全局数据库名.服务名 , 这是几个令很多初学者容易混淆的概念.相信很多初学者都与我一样被标题上这些个概念搞得一头雾水.我们现在就来把它们弄个明白. 一.数据库名 什么是数 ...

  7. 菜鸟——springboot+mybatis+maven

    网上找了很多资料,学习如何搭建springboot,由于刚刚接触springboot,不是很熟练,通过参考网上别人搭建的例子,自己也搭建了一个简单的springboot+mybaits+maven 网 ...

  8. oracle 游标实现多重循环

    declare -- Local variables here i integer; cursor c_province is select ds.swjg_dm from dm_swjg ds wh ...

  9. Ansible组件之inventory主机清单

    静态inventory 所有的主机信息都存放在Ansible的inventory组件里面,默认Ansible的inventory是一个静态的ini格式的文件/etc/ansible/hosts,当然还 ...

  10. Python学习-27.Python中的列表（list）

    列表已经用了很多次了.使用中括号包含元素. list = ['a','b','c'] 获取元素使用[]. print(list[0]) 输出a 不过值得注意的是,[]只能是0到元素个数-1吗?在Pyt ...