js搜索历史记录

46 篇文章 0 订阅

效果地址:http://www.seetao.com/m_search.html 手机端

html:

<body>

    <div class="search_top">
        <img src="__IMG__/search_icon2.png" class="search_fang" />
        <input type="hidden" name="show" value="1" />
        <input name="keywords" id="keywords"  type="text" placeholder="{:L('Search_content_interest')}" value="{$keywords}" class="input_search input_top" onkeyup="this.value=this.value.replace(/[, ]/g,'')"/>
        <a class="search_cancel" id="search">{:L('search')}</a>
        <a href="{$return_url}" class="search_back">{:L('cancel')}</a>
    </div>
    <div class="search_null" style="display: none;">
        <img src="__IMG__/collect.png" />
        <p style="text-align: center;margin-top:-2rem;font-size:0.45rem;color: #999999;">{:L('Nothing')}</p>
    </div>
    <div class="history">
        <div class="history_top" >
            <span class="search_history">{:L('history')}</span>
            <span class="del" id="empty">{:L('Clear_history')}</span>
        </div>
        <div class="contain">
            <div class="fr" id="history"></div>
        </div>
    </div>
    <div id="content">
        <eq name="show" value="1">
            <if condition="$article_list">
                <foreach name="article_list" item="vo">
                    <a href="{$vo['link']}">
                        <dl class="index_project">
                            <dt><img src="{$vo['image_url']}" /></dt>
                            <dd>{$vo['theme']}</dd>
                            <dd>
                                <span class="index_shuoming">{$vo['description']}</span>
                            </dd>
                        </dl>
                    </a>
                </foreach>
            </if>
            <if condition="$more gt 0">
                <div id='msg' style='text-align: center'>
                    <span>{:L('Slide_up_more')}</span>
                </div>
                <else />
                <if condition="$article_list">
                    <div id='msg' style='text-align: center'>
                        <span>{:L('No_more')}</span>
                    </div>
                    <else />
                    <div class="search_null">
                        <img src="__IMG__/collect.png" />
                        <p style="text-align: center;margin-top:-2rem;font-size:0.45rem;color: #999999;">{:L('Nothing')}</p>
                    </div>
                </if>
            </if>
        </eq>
    </div>

</body>

css:

<style>
    body{
        font-size: 0.35rem;
    }
    .search_top input{
        padding-left: 0.65rem;
    }
    .search_back{
        display: block;
        margin-left: 0;
        margin-top: 0.2rem;
    }

    .history_top{
        font-size: 0.28rem;
        color: #000;
        width: 6.9rem;
        margin-left: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }
    .contain{
        font-size: 0.26rem;
        color: #9B9C9E;
        width: 6.9rem;
        margin-left: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .search_top{
        margin-bottom: 0.52rem;
    }
    .fr{
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .fr a,.fr p{
        width: auto;
        height: 0.68rem;
        border:1px solid rgba(204,204,204,1);
        border-radius:0.08rem;
        margin-right: 0.2rem;
        margin-bottom: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.2rem;
    }
    .search_dianji{
        color: #CCCCCC;
    }
    .search_back{
        width: auto;
        display: none;
        font-size: 0.3rem;
    }
</style>

js:

<script type="text/javascript">
    var $keywords = "{$keywords}";
    var $start = "{$start}";
    var $more = "{$more}";
    var $point_time = "{$point_time}";
    var $load = true;
    var $result = false;
    var $show = "{$show}";
    $(function () {
        //点击搜索功能
        $(".search_cancel").click(function () {
            $keywords = $('.input_search').val();
            $start = 0;
            if ($load) {
                $load = false;
                $('.search_null').css({ 'display': 'none' });
                $.ajax({
                    type: 'GET',
                    data: { 'keywords': $keywords, 'start': $start, 'point_time': $point_time},
                    url: "{:U('Article/search');}",
                    dataType: 'json',
                    success: function (data) {
                        if (data['status'] == 1) {
                            $result = data['data'];
                            var $html = setData();//处理数据

                            if ($result['article_list'].length > 0) {
                                if ($result['more'] == 1) {
                                    $html += "<div id='msg' style='text-align: center'><span>{:L('Slide_up_more')}</span></div>";
                                } else {
                                    $html += "<div id='msg' style='text-align: center'><span>{:L('No_more')}</span></div>";
                                }
                                //延迟1秒加载
                                setTimeout(function () {
                                    $start = $result['start'];
                                    $more = $result['more'];
                                    $point_time = $result['point_time'];
                                    $load = true;
                                    $('#content').html($html);
                                }, 1000);
                            } else {
                                $start = $result['start'];
                                $more = $result['more'];
                                $load = true;
                                $('#content').html($html);
                                $('.search_null').css({ 'display': 'block' });
                            }
                        } else {
                            $more = 0;
                            $load = true;
                        }
                    },
                    error: function (xhr, type) {
                        $more = 0;
                        $load = true;
                    }
                });
            }
        });


        $(window).scroll(function () {
            if ($(window).scrollTop() >= ($(document).height() - $(window).height()) / 2) {
                $keywords = $('.input_search').val();
                if ($more == 1 && $load) {
                    $load = false;
                    $('#msg').html($('#msgLoad').html());
                    $.ajax({
                        type: 'GET',
                        data: { 'keywords': $keywords, 'start': $start, 'point_time': $point_time},
                        url: "{:U('Article/search');}",
                        dataType: 'json',
                        success: function (data) {
                            if (data['status'] == 1) {
                                $result = data['data'];
                                var $html = setData();//处理数据

                                //延迟1秒加载
                                setTimeout(function () {
                                    $start = $result['start'];
                                    $more = $result['more'];
                                    $point_time = $result['point_time'];
                                    $load = true;
                                    $('#msg').before($html);
                                    if ($more == 1) {
                                        $('#msg').html($('#msgFirst').html());
                                    } else {
                                        $('#msg').html($('#msgEnd').html());
                                    }
                                }, 1000);
                            } else {
                                $more = 0;
                                $load = true;
                                $('#msg').html($('#msgEnd').html());
                            }
                        },
                        error: function (xhr, type) {
                            $more = 0;
                            $load = true;
                            $('#msg').html($('#msgEnd').html());
                        }
                    });
                }
            }
        });
    });

    function setData() {
        var $html = '';
        if ($result) {
            for (var $i = 0; $i < $result['article_list'].length; $i++) {
                $html += "<a href='" + $result['article_list'][$i]['link'] + "'><dl class='index_project'>"
                    + "<dt><img src=" + $result['article_list'][$i]['image_url'] + "></dt>"
                    + "<dd>" + $result['article_list'][$i]['theme'] + "</dd>"
                    + "<dd>"
                    + "<span class='index_shuoming'>" + $result['article_list'][$i]['description'] + "</span>"
                    + "</dl></a>";
            }
        }
        return $html;
    }

    // 上滑遮罩层
	$(".share").click(function(){
		$("transition").css("display","block");
	})
	$(".cancel").click(function(){
		$("transition").css("display","none");
	})
	function toshare() {
		$(".am-share2").addClass("am-modal-active");
		if ($(".sharebg").length > 0) {
			$(".sharebg").addClass("sharebg-active");
		} else {
			$("body").append('<div class="sharebg"></div>');
			$(".sharebg").addClass("sharebg-active");
		}
		$(".sharebg-active,.share_btn").click(function () {
			$(".am-share2").removeClass("am-modal-active");
			setTimeout(function () {
				$(".sharebg-active").removeClass("sharebg-active");
				$(".sharebg").remove();
			}, 300);
		})
    }	
    
    //搜索和取消按钮
    $(".search_cancel").css('display','none')
    $(".search_back").css('display','block')
    $(".input_search").bind("input propertychange",function(event){
        var inp_len = $(".input_search").val().length
        console.log(inp_len)
        console.log($(".input_search").val())
        if(inp_len == 0){
            $(".search_cancel").css('display','none')
            $(".search_back").css('display','block')
        }else{
            $(".search_cancel").css('display','block')
            $(".search_back").css('display','none')
        }
    })
    


     //点击历史记录的文字可以搜索
     $(".fr").on('click','.btn-default',function(){
        $(".history").css('display','none')
            // var tem=obj
            // var word=$(tem).text();
            // setWorld(word);
            var $keywordss = $(this).text();
            $start = 0;
            if ($load) {
                $load = false;
                $('.search_null').css({ 'display': 'none' });
                $.ajax({
                    type: 'GET',
                    data: { 'keywords': $keywordss, 'start': $start, 'point_time': $point_time},
                    url: "{:U('Article/search');}",
                    dataType: 'json',
                    success: function (data) {
                        if (data['status'] == 1) {
                            $result = data['data'];
                            var $html = setData();
                            if ($result['article_list'].length > 0) {
                                if ($result['more'] == 1) {
                                    $html += "<div id='msg' style='text-align: center'><span>{:L('Slide_up_more')}</span></div>";
                                } else {
                                    $html += "<div id='msg' style='text-align: center'><span>{:L('No_more')}</span></div>";
                                }
                                //延迟1秒加载
                                setTimeout(function () {
                                    $start = $result['start'];
                                    $more = $result['more'];
                                    $point_time = $result['point_time'];
                                    $load = true;
                                    $('#content').html($html);
                                }, 1000);
                            } else {
                                $start = $result['start'];
                                $more = $result['more'];
                                $load = true;
                                $('#content').html($html);
                                $('.search_null').css({ 'display': 'block' });
                            }
                        } else {
                            $more = 0;
                            $load = true;
                        }
                    },
                    error: function (xhr, type) {
                        $more = 0;
                        $load = true;
                    }
                });
            }
    })


</script>
< !-- <script type="text/javascript">
    //取值写入页面
    $(function(){
        //历史记录
        var str=localStorage.historyItems;
        var s = '';
        var strs= [];
        strs=str.split("|");
        for(var i=0;i<strs.length;i++){
            s += "<p class='search_dianji search_cancel' οnclick='dianji()'>"+strs[i]+"</p>";
        }
        $(".contain .fr").html(s);
        $('.history_top').show();
    });
     
     //点击历史记录的文字可以搜索
     $(".fr").on('click','.search_dianji',function(){
        $(".history").css('display','none')
            // var tem=obj
            // var word=$(tem).text();
            // setWorld(word);
            var $keywordss = $(this).text();
            $start = 0;
            if ($load) {
                $load = false;
                $('.search_null').css({ 'display': 'none' });
                $.ajax({
                    type: 'GET',
                    data: { 'keywords': $keywordss, 'start': $start, 'point_time': $point_time},
                    url: "{:U('Article/search');}",
                    dataType: 'json',
                    success: function (data) {
                        if (data['status'] == 1) {
                            $result = data['data'];
                            var $html = setData();
                            if ($result['article_list'].length > 0) {
                                if ($result['more'] == 1) {
                                    $html += "<div id='msg' style='text-align: center'><span>{:L('Slide_up_more')}</span></div>";
                                } else {
                                    $html += "<div id='msg' style='text-align: center'><span>{:L('No_more')}</span></div>";
                                }
                                //延迟1秒加载
                                setTimeout(function () {
                                    $start = $result['start'];
                                    $more = $result['more'];
                                    $point_time = $result['point_time'];
                                    $load = true;
                                    $('#content').html($html);
                                }, 1000);
                            } else {
                                $start = $result['start'];
                                $more = $result['more'];
                                $load = true;
                                $('#content').html($html);
                                $('.search_null').css({ 'display': 'block' });
                            }
                        } else {
                            $more = 0;
                            $load = true;
                        }
                    },
                    error: function (xhr, type) {
                        $more = 0;
                        $load = true;
                    }
                });
            }
        // }
    })

    // 按键盘的回车搜索东西
    function keyup_submit(e){
        var evt = window.event || e;
        if (evt.keyCode == 13){
            var key=JSON.parse(localStorage.getItem("key"));
            $(".history").css('display','none')
            $keywords = $('.input_search').val();
            $start = 0;
            if ($load) {
                $load = false;
                $('.search_null').css({ 'display': 'none' });
                $.ajax({
                    type: 'GET',
                    data: { 'keywords': $keywords, 'start': $start, 'point_time': $point_time},
                    url: "{:U('Article/search');}",
                    dataType: 'json',
                    success: function (data) {
                        if (data['status'] == 1) {
                            $result = data['data'];
                            var $html = setData();//处理数据
                            if ($result['article_list'].length > 0) {
                                if ($result['more'] == 1) {
                                    $html += "<div id='msg' style='text-align: center'><span>{:L('Slide_up_more')}</span></div>";
                                } else {
                                    $html += "<div id='msg' style='text-align: center'><span>{:L('No_more')}</span></div>";
                                }
                                //延迟1秒加载
                                setTimeout(function () {
                                    $start = $result['start'];
                                    $more = $result['more'];
                                    $point_time = $result['point_time'];
                                    $load = true;
                                    $('#content').html($html);
                                }, 1000);
                            } else {
                                $start = $result['start'];
                                $more = $result['more'];
                                $load = true;
                                $('#content').html($html);
                                $('.search_null').css({ 'display': 'block' });
                            }
                        } else {
                            $more = 0;
                            $load = true;
                        }
                    },
                    error: function (xhr, type) {
                        $more = 0;
                        $load = true;
                    }
                });
            }
        }
    }


    //按回车的时候记录历史
    $('.input_top').on('keydown',function(e){
        if(e.keyCode=='13'){
            var keyword=$('.input_top').val();
            setWorld(keyword);
        }
    })	
    // 点击按钮的时候记录历史
    $('.search_cancel').on('click',function(e){
        location.href='#';
        var keyword=$('.input_top').val();
        setWorld(keyword);
        $(".history").css('display','none')
    })	
    //存值方法,新的值添加在首位
    //当为空的时候设置一个关键字进去,判断如果关键字是否存在,不存在就追加新的关键字  
    function setWorld(keyword){
        $('.history_top').show();
        var historyItems=localStorage.historyItems
        if(historyItems===undefined){
            localStorage.historyItems=keyword;
        }else{
            historyItems=keyword+'|'+historyItems.split('|').filter(e=>e!=keyword).join('|');
            localStorage.historyItems=historyItems;			
        }		
    }
    //清除历史记录
    $('.del').click(function(){
        localStorage.removeItem('historyItems');
        $('.contain .fr').html('');
        $('.history_top').hide();
    })
    $('.del').mouseover(function(){
        $(this).css('background','peachpuff')
    })
    
</script> -->
$(function () {
    update_history();
    // 绑定回车事件
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            $("#search").click();
        }
    });

    // 搜索点击事件
    $("#search").click(function () {
        $(".history").css("display",'none')
        var keywords = $("#keywords").val();
        search_history(keywords); //添加到缓存
        update_history(); //更新搜索历史
    })

    // 清空搜索历史
    $("#empty").click(function () {
        mystorage.remove('keywords');
        $("#history").html(" ");
    })

})

// 更新搜索历史
function update_history() {
    var history_keywords = mystorage.get("keywords");
    if (history_keywords) {
        var html = "";
        $.each(history_keywords, function (i, v) {
            html += "<a class='btn btn-default' href='javascript:;' role='button'>" + v + "</a>"
        })
        $("#history").html(html);
    };
}

//点击历史按钮同步到输入框
function empty_value(keyword) {
    $("#keywords").val(keyword);
}

//  储存历史记录的数组
function search_history(value) {
    var data = mystorage.get("keywords");
    if (!data) {
        var data = []; //定义一个空数组
    } else if (data.length === 10) { //搜索历史数量
        data.shift();  //删除数组第一个元素有
    } else {

    };
    if (value) {  //判断搜索词是否为空
        if (data.indexOf(value) < 0) {  //判断搜索词是否存在数组中
            data.unshift(value);    //搜索词添加到数组中
            mystorage.set("keywords", data);  //存储到本地化存储中
        };
    };
}


var mystorage = (function mystorage() {
    var ms = "mystorage";
    var storage = window.localStorage;
    if (!window.localStorage) {
        alert("浏览器不支持localstorage");
        return false;
    }
    var set = function (key, value) {
        //存储
        var mydata = storage.getItem(ms);
        if (!mydata) {
            this.init();
            mydata = storage.getItem(ms);
        }
        mydata = JSON.parse(mydata);
        mydata.data[key] = value;
        storage.setItem(ms, JSON.stringify(mydata));
        return mydata.data;
    };
    var get = function (key) {
        //读取
        var mydata = storage.getItem(ms);
        if (!mydata) {
            return false;
        }
        mydata = JSON.parse(mydata);
        return mydata.data[key];
    };
    var remove = function (key) {
        //读取
        var mydata = storage.getItem(ms);
        if (!mydata) {
            return false;
        }
        mydata = JSON.parse(mydata);
        delete mydata.data[key];
        storage.setItem(ms, JSON.stringify(mydata));
        return mydata.data;
    };
    var clear = function () {
        //清除对象
        storage.removeItem(ms);
    };
    var init = function () {
        storage.setItem(ms, '{"data":{}}');
    };
    return {
        set: set,
        get: get,
        remove: remove,
        init: init,
        clear: clear
    };
})();
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值