h5搜索功能

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>没毛病</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
</head>
<body>
<input class="" id="sec"><!--搜索框-->
<button id="search">搜索</button>

<!--历史记录-->
<div class="current">最近搜索</div>
<div class="delete history" style="width: 100%;float: left"></div>

<!--删除按钮-->
<div class="history" id="his-dele">X</div>

<script src="js/jquery-1.7.2.min.js"></script>
<script>

    /*搜索记录相关*/

    var hisTime;//获取搜索时间数组
    var hisItem;//获取搜索内容数组
    var firstKey;//获取最早的1个搜索时间

    function init (){
        hisTime = [];//时间数组置空
        hisItem = [];//内容数组置空

        for(var i = 0; i < localStorage.length; i++){//数据去重
            if(!isNaN(localStorage.key(i))){//判断数据是否合法
                hisTime.push(localStorage.key(i));
            }
        }

        if(hisTime.length > 0) { //根据时间戳排序，翻转
            hisTime.sort();//排序
　　　　　　　hisTime.reverse(); //翻转
            for (var y = 0; y < hisTime.length; y++) {
                localStorage.getItem(hisTime[y]).trim() && hisItem.push(localStorage.getItem(hisTime[y]));
            }
        }
        $(".delete").html("");//执行init(),每次清空之前添加的节点
　　　　　for(var i = 0; i < hisItem.length; i++){
            $(".delete").prepend('<div class="word-break">'+hisItem[i]+'</div>');
        }
    }
    init();//调用
　　//点击搜索
    $("#search").click(function(){
        var value = $("#sec").val();
        var time = (new Date()).getTime(); //获取当前时间戳

        if(!value){
            alert("你未输入搜索内容");
            return false;
        }
       //输入的内容localStorage有记录
　　　　//判断数组中是否存在当前元素
   　　 if($.inArray(value,hisItem) >= 0){ 
            for(var j = 0; j < localStorage.length; j++){
　　　　　　　　　　//如果存在移除
                if(value == localStorage.getItem(localStorage.key(j))){
                    localStorage.removeItem(localStorage.key(j));
                }
            }
            localStorage.setItem(time,value);

        }else{
            localStorage.setItem(time,value);
        }
        init();
    });

    //清除记录功能
    $("#his-dele").click(function(){
        var f = 0;
        $("history").html();
　　　　 init(); }); 

　　//苹果手机不兼容出现input无法取值以下是解决方法  
　　$( ".delete" ).on( "click", ".word-break", function() { 
　　　　　var div = $(this).text(); 
　　　　  $('#sec').val(div); 
　　}); 
</script> 
</body> 
</html>
posted @ 2017-12-18 14:00 党欣彤阅读(3563) 评论(0) 收藏举报
党欣彤

h5搜索功能

公告
