利用cookie记录输入框搜索记录

1、下载jq

jquery下载

2、下载 jquery.cookie.js

jquery.cookie.js

3、引入jq,jquery.cookie.js

4、页面js代码调用

//页面脚本调用
$(".gyl").historyCookies({
             length:6,
             name:'history1'
 });

5、js处理代码

// +----------------------------------------------------------------------
// | Created by Vscode: JRKAdmin框架 [ JRKAdmin ]
// +----------------------------------------------------------------------
// | Copyright (c) 2019~2022 [LuckyHHY] All rights reserved.
// +----------------------------------------------------------------------
// | SiteUrl: http://www.luckyhhy.cn
// +----------------------------------------------------------------------
// | Author: Jackhhy <jackhhy520@qq.com>
// +----------------------------------------------------------------------
// | Date: 2019/12/27-8:58
// +----------------------------------------------------------------------
// | Description:
// +----------------------------------------------------------------------
(function($){
    $.fn.historyCookies = function(options) {
        var _this = this;
        var cookiesValue=[];
        var timer=null;
        var defaultParams={
            length:10, //显示历史的记录个数
            name:'',  //div id 值
            expires:7 //过期时间 7天
        }
        $.extend(defaultParams,options||{});
        $(_this).parent().append($('<div class="show_history"  style="position: absolute;color: #6483ff;cursor: pointer;z-index: 1000;" id="div_'+defaultParams.name+'"/>').append($("<ul>")));
        var rect= dealWithRect( _this[0].getBoundingClientRect());
        //console.info(rect);
        //这里的宽高根据实际自定义
        $("#div_"+defaultParams.name).css({
            width:rect.width+"px",
            top:rect.top+4+"px",
            left:rect.left-4+"px"
        });
        _this.focus(elFocus);
        _this.blur(elBlur);
        var ul = $("#div_"+defaultParams.name).children("ul");
        ul.mouseenter(function (){
            clearTimeout( timer);
        });
        ul.mouseout(function (){
            clearTimeout( timer);
        });
        ul.mouseleave(function(){
            timer=setTimeout(closeDiv,1000);
        });

        //当前输入框内容改变时候存储值到cookie
        _this.on('input propertychange',function(){elKeyDown();});

        /**
         * 输入框获取焦点时候的div显示和其它操作
         */
        function elFocus(){
            cookiesValue= returnCookiesA( defaultParams.name);
            ul.empty();
            if(cookiesValue== null || cookiesValue.length <=0){
                return;
            }
            if( cookiesValue!= null && cookiesValue.length>0){
                $.each(cookiesValue,function(index,vale){
                    var li = $("<li>").click(function(e){
                        e.preventDefault();
                        e.stopPropagation();
                        _this.val($(this).text());
                        clearTimeout( timer);
                        closeDiv();
                        elKeyDown();
                    }).mousemove(function(){
                        $.each(ul.children(),function(index,li){
                            $(li).css({
                                "background-color":"#fff"
                            })
                        })
                        $(this).css({
                            "background-color":"#eeeeee"
                        })
                    });
                    li.text(vale);
                    ul.append(li);
                });
            }
            $("#div_"+defaultParams.name).show();
            var rect1= dealWithRect(_this[0].getBoundingClientRect());
            //这里的宽高根据实际自定义
            $("#div_"+defaultParams.name).css({
                width:rect.width+"px",
                top:rect.top+4+"px",
                left:rect.left-4+"px"
            });
        }

        /**
         * 输入框失去焦点时候
         */
        function elBlur(){
            timer=setTimeout(closeDiv,1000);
            elKeyDown();
        }


        /**
         * 保存输入框输入的 值到cookie
         */
        function elKeyDown(){
            //console.info("elKeyDown");
            //if(event.keyCode==13){
            var str =  $.cookie(defaultParams.name);
            var value = _this.val();
            if(value== null || ""==value){
                return;
            }
            if(str== null || ""==str){
                console.info(defaultParams.name+ value);
                $.cookie(defaultParams.name,value, { expires: defaultParams.expires });
            }else{
                if(str.indexOf(",")>0){
                    var aStr = str.split(",");
                    if(aStr.length > defaultParams.length){
                        var isExist = false;//是否已经存在
                        aStr = aStr.splice(0, defaultParams.length-1);
                        var indexz =-1;
                        $.each(aStr,function(index,v){
                            if(index <= defaultParams.length){
                                if(v== value){
                                    isExist = true;
                                    indexz = index;
                                    return;
                                }
                            }
                        });
                        if(!isExist){
                            aStr.pop();
                            $.cookie(defaultParams.name,value+","+aStr.join(","), { expires: defaultParams.expires });
                        }else{
                            aStr.splice(indexz,1);
                            $.cookie(defaultParams.name,value+","+aStr.join(","), { expires:defaultParams.expires });
                        }
                    }else{
                        var isExist = false;//是否已经存在
                        var indexz =-1;
                        $.each(aStr,function(index,v){
                            if(v == value){
                                isExist = true;
                                indexz = index;
                                return;
                            }
                        });
                        if(!isExist){
                            $.cookie(defaultParams.name,value+","+aStr.join(","), { expires:defaultParams.expires });
                        }else{
                            aStr.splice(indexz,1);
                            $.cookie(defaultParams.name,value+","+aStr.join(","), { expires:defaultParams.expires });
                        }
                    }
                }else{
                    if(value!=str ){
                        $.cookie(defaultParams.name,value+","+str, { expires: defaultParams.expires });
                    }
                }
            }
            //}
        }

        /**
         * 隐藏div
         */
        function   closeDiv (){
            //console.info(timer);
           // var str =  $.cookie(defaultParams.name);
            //console.log(str);
            $("#div_"+ defaultParams.name).hide();
            $("#div_"+ defaultParams.name).children("ul").empty();

        }
    };

    /**
     * 获取cookie值
     * @param key
     * @returns {Array}
     */
    function returnCookiesA(key){
        var a = [];
        var str =  $.cookie(key);
        if(str== null || ""==str){
        }else{
            if(str.indexOf(",")>0) {
                a =str.split(",");
            }else{
                a.push(str);
            }
        }
        return a;
    }

    /**
     * 处理宽高
     * @param data
     * @returns {{top: number, left: number, bottom: number, width: number, right: number, height: number}}
     */
    function dealWithRect(data){
        var a= {width:0,height:0,bottom:0,top:0,right:0,left:0}
        if(data){
            $.each(data,function(key,value){
                a[key]= value;
            });
            a.width=  a.right- a.left;
            a.height=  a.bottom- a.top;
        }
        return a;
    }
})(jQuery);