1、下载jq
2、下载 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);