jquery实现搜索框历史搜索记录功能

最新推荐文章于 2024-05-01 15:22:30 发布

赵彤彤

最新推荐文章于 2024-05-01 15:22:30 发布

阅读量3.1k

点赞数 3

分类专栏： jQuery学习

jQuery学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="inp">
    <button type="button" id="btn">搜索</button>
    <br>
    <div id="keyname"></div>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        var searchArr;
        //定义一个search的，判断浏览器有无数据存储（搜索历史）
        if(localStorage.search){
            //如果有，转换成 数组的形式存放到searchArr的数组里（localStorage以字符串的形式存储，所以要把它转换成数组的形式）
            searchArr= localStorage.search.split(",")
        }else{
            //如果没有，则定义searchArr为一个空的数组
            searchArr = [];
        }
        //把存储的数据显示出来作为搜索历史
        MapSearchArr();
        $("#btn").on("click", function(){
            var val = $("#inp").val();
            //点击搜索按钮时，去重
            KillRepeat(val);
            //去重后把数组存储到浏览器localStorage
            localStorage.search = searchArr;
            //然后再把搜索内容显示出来
            MapSearchArr();
        });
        function MapSearchArr(){
            var tmpHtml = "";
            for (var i=0;i<searchArr.length;i++){
                tmpHtml += "<span>" + searchArr[i] + "</span>&nbsp;"
            }
            $("#keyname").html(tmpHtml);
        }
        //去重
        function KillRepeat(val){
            var kill = 0;
            for (var i=0;i<searchArr.length;i++){
                if(val===searchArr[i]){
                    kill ++;
                }
            }
            if(kill<1){
                searchArr.push(val);
            }
        }
    </script>
</body>
</html>

赵彤彤

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jquery实现搜索框历史搜索记录功能

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>body> input type="text" id="inp"> button type="button" id="btn">搜索button> br> div id="keyname">div>
复制链接

扫一扫