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

　　　　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. predict_proba 的使用

  2. tomcat6.0 配置不同端口访问不同项目

    <?xml version='1.0' encoding='utf-8'?> <!-- Licensed to the Apache Software Foundation (ASF ...

  3. 2018.09.02 Atcoder Regular Contest 102简要题解

    比赛传送门 T1 Triangular Relationship 分析之后发现有两种情况: 1. n为奇数,那么所有数都是k的倍数. 2. n为偶数,那么所有数都是k/2的倍数. 然后就可以愉快A题了 ...

  4. DataGrid组件

    <?xml version="1.0" encoding="utf-8"?><s:WindowedApplication xmlns:fx=& ...

  5. Git客户端命令总结

    一:常用命令 1.先进入项目目录,然后git init:则会为此 项目/目录 创建一个本地仓库(或重新初始化这个本地仓库),可以用ls -a ./看到多了.git目录: 或者git init /hom ...

  6. Python调用Google翻译

    出自:http://blog.csdn.net/zhaoyl03/article/details/8830806 最近想动手做一个文档自动下载器,需要模拟浏览器的行为.虽然感觉思路上没有困难,但在技术 ...

  7. jmeter 5.0版本更新说明（个人做个记录）

    变化   此页面仅详细说明了当前版本中所做的更改. 先前更改的历史记录中详细介绍了早期更改.   5.0版 摘要 新的和值得注意的 不兼容的变化 Bug修复 改进 非功能性变化 已知问题和解决方法 谢 ...

  8. git-fork其他人的代码

    1. 2. 3.然后在本地创建目录      第一步:mkdir test      第二步:cd test      第三步:git init(初始化)      第五步:git remote ad ...

  9. hdu 2058 The sum problem（数学题）

    一个数学问题:copy了别人的博客 #include<cstdio> #include<cstdlib> #include<cmath> int main() { ...

  10. hdu 5067 遍历指定点集最小时间

    http://acm.hdu.edu.cn/showproblem.php?pid=5067 贴题解 由于Harry的dig machine是无限大的,而装载石头和卸载石头是不费时间的,所以问题可以转 ...