搜索实现 app 本地搜索效果，有历史记录的

最新推荐文章于 2023-09-11 00:58:25 发布

Zoe_Wang_ing

最新推荐文章于 2023-09-11 00:58:25 发布

阅读量3.6k

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/Zoe_Wang_ing/article/details/41980507

版权

js 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

html

<section class="h-search">
        <form action="">
            <label for="search" class="h-bge7 h-search-box">
                <input type="text" placeholder="搜索" name="" id="searchCon" value="" >
                <i class="icon-remove-sign"></i>   
                <a href="#" id="onSearch">搜索</a>
            </label>
            <ul class="h-search-item">
                <li>历史记录</li>
                <!-- <li>旧金山</li>
                <li>北京</li> -->
            </ul>
            <a href="javascript:;" id="clearData" class="h-btngreybord">清空历史记录</a>
        </form>
        </section>

<span style="font-size:14px;"><script src="../../thirdvendor/zepto/zepto.js"></script>
        <script src="../../thirdvendor/zepto/touch.js"></script>
        <script>
        
        $(function(){
            saveData();
            upData();
            clearkey();
            searchKey();
        })
        function saveData(){
            var kwdCacheKey = 'h_kwd_list';     //定义数据存储对象名

            $('#onSearch').on('tap', function(){
                var currentKwd = $('#searchCon').val(),     //搜索内容
                    currentKwdKey = 'k_'+currentKwd,        //当前搜索值对应的键值
                    currentKwdList = {},                    //创建json对象 
                    kwdStr = localStorage.getItem(kwdCacheKey);     //获取历史搜索内容（字符串）
                if(kwdStr !== null){
                    var kwdList = JSON.parse(kwdStr);       //将历史搜索内容转化为对象
                }

                currentKwdList[currentKwdKey] = currentKwd; //将当前输入关键字动态加入新创建json对象中

                if(kwdList == undefined){   //如果不存在历史搜索内容，直接将当前搜索内容转化为字符串
                    var kwdTxt = JSON.stringify(currentKwdList);
                }else{
                    //合并对象（当前搜索内 和 历史 搜索内容）
                    var kwdTxtObj = mergeToRepeat(currentKwdList,kwdList);
                    //转化为序列化json字符串格式
                    kwdTxt = JSON.stringify(kwdTxtObj);
                }
                localStorage.setItem(kwdCacheKey, kwdTxt);  //存入localStorage
            })

        }

        function upData(){  //取数据
            var kwdTxt = window.localStorage.h_kwd_list ? window.localStorage.h_kwd_list : undefined;
            if(kwdTxt !== undefined){
                kwdTxtObj = JSON.parse(kwdTxt);
                //console.log(kwdTxtObj);

                for(var attr in kwdTxtObj){ //遍历对象
                    var item = '<li>'+kwdTxtObj[attr]+'</li>';
                    $('.h-search-item').append(item);
                }
            }
        }

        function clearkey(){
            //清空历史记录 并刷新页面
           $('#clearData').on('tap', function(){
                //localStorage.clear();   //删除所有localStorage的值
                localStorage.removeItem('h_kwd_list'); //删除h_kwd_list这个键值的里面所有的值
                location.reload();
           })
        }

        function searchKey(){   //直接用历史记录查询
            $('.h-search-item li').on('tap', function(){
                $('#searchCon').val($(this).text());
            })
        }
        function mergeToRepeat(json1,json2){    //遍历两个对象合成一个并将两个对象中重复的键值的值去掉前一个
            var resJson={};
            for(var i in json1){
                resJson[i]=json1[i];
            }
            for (var i in json2) {
                resJson[i]=json2[i];
            };
            return resJson;
        }
        </script></span>