实现可搜索仿select下拉选中

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

　　　　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 个人觉得对性能损耗比较大（不推荐）

posted @ 2019-03-26 11:07  link_xjxj  阅读(1710)  评论(0)  编辑  收藏  举报