/** * Created by Yvonne on 2018/1/15. * input 输入cookies中记录 * eg: * $("#history1").historyCookies({ * length:6, * name:'history1' * }) */ ;(function($){ $.fn.historyCookies = function(options) { var _this = this; var cookiesValue=[]; var timer=null; var defaultParams={ length:10, name:'', expires:7 } $.extend(defaultParams,options||{}); $("body").append($('<div class="show_history" 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+14+"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); }); _this.on('input propertychange',function(){elKeyDown();}); 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:rect1.width+"px", top:rect1.top+13+"px", left:rect1.left-4+"px" }); } function elBlur(){ timer=setTimeout(closeDiv,1000); elKeyDown(); } 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 }); } } } //} } function closeDiv (){ console.info(timer); $("#div_"+ defaultParams.name).hide(); $("#div_"+ defaultParams.name).children("ul").empty(); } } 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; } 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);
转载于:https://my.oschina.net/u/2948019/blog/1797118