通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

jq实现的方法:

  jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件

  要实现的效果:

    

下面是jq代码:

    

$(function(){
	var til=$("#orderInfoContent");//获取到input搜索框
	var vlue=$.cookie(‘plhder‘);//获取cookie值
	til.attr(‘placeholder‘,vlue);//把获取到的cookie值attr到搜索框中
	$("#orderInfoSelectIndex option").each(function(k,v){
		var option=$(v);
		option.on("click",function(){
			var hml=$(this).html();
			$.cookie(‘plhder‘,hml,{expires:30});//把hml这个变量保存到cookie
			til.attr("placeholder",hml);
		})
	})
})

  下面是js实现方法

//设置Cookie
function setCookie(cookiename,cookievalue,iDay){
	var d=new Date();
	d.setDate(d.getDate()+iDay);
	document.cookie=cookiename+"="+cookievalue+";expires="+d;
}

//setCookie("name","liujingyang",30);
//获取cookie
function getCookie(cookiename){
	var cookieStr=document.cookie;
	var cookieArr=cookieStr.split(";")
	for(var i=0;i<cookieArr.length;i++){
		var arr=cookieArr[i].split("=");
		if(arr[0]==cookiename){
			return arr[1];
		}
	}
	return ‘‘;
}
//alert(getCookie("name"));
//宝贝查询 默认值动态选取

$(function(){

	var til=$(".ontext");
	var vlue=getCookie("plhder");
	til.attr("placeholder",vlue);
	$(".xlxzz option").each(function(k,v){
		var option=$(v);
		option.on("click",function(){
			var hml=$(this).html();
			setCookie("plhder",hml,30);
			til.attr("placeholder",hml);

		})
	})
})

  

时间: 2024-10-11 22:52:36

通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法的相关文章

html搜索框实现及IE浏览器的兼容性

<html> <head> <!--如下的meta 表示浏览器的文档模式 以最新版的IE模式   兼容性解决--> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>soso</title> </head> <style type="text/css"> <span sty

EasyUI基础入门之searchbox&amp;progressbar(搜索框和进度条)

easyui基础部分的学习(八大部分)只剩下searchbox和pargressbar.tooltip了,有点小激动呢.本偏文章将对searchbox和pargressbar做一个学习.鉴于两者的内容都不会太多,这里就直接将之合并在一起啦! searchbox 不用过多解释,只要用于用户对数据的搜索.使用$.fn.searchbox.defaults重载默认值. 依赖组件:菜单按钮. searchbox提示用户输入搜索值.它可以设定一个类别菜单,允许用户选择不同的搜索类别.当用户点击确认按钮时将

SearchBox( 搜索框) 组件

一. 加载方式//class 加载方式<input id="ss" class="easyui-searchbox" style="width:300px"data-options="searcher:qq,prompt:'Please InputValue',menu:'#box'"></input><div id="box" style="width:120px&

Android自定义搜索框

搜索框里的虚拟键盘 xml如下 <EditText android:id="@+id/et_shopshow_search" android:layout_width="144dp" android:layout_height="40dp" android:singleLine="true" android:paddingLeft="8dp" android:paddingRight="8d

EasyUI基础searchbox&amp;amp;progressbar(搜索框,进度条)

easyui学习的基本组成部分(八个部分)硕果仅存searchbox和pargressbar.tooltip该,有一点兴奋.本文将偏向searchbox和pargressbar做一个探讨.鉴于双方的内容不会太多,在这里,直接此事合并! searchbox 不用过多解释,仅仅要用于用户对数据的搜索.使用$.fn.searchbox.defaults重载默认值. 依赖组件:菜单button. searchbox提示用户输入搜索值.它能够设定一个类别菜单,同意用户选择不同的搜索类别.当用户点击确认bu

自定义webkit搜索框样式

好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览器上表现一致... 用过mac的同学应该了解这个情况: 就拿前端观察右上角的搜索框来说,在Windows下和mac下的表现就完全不一样啊,mac下(包括safari和chrome),除了宽度外,你设置的其它样式基本是无效的,这种细长的界面和iOS上的搜索框是一样的,或许苹果认为,搜索框就应该是这样的

如何给easyui datagrid toolbar上方添加搜索框

最近在使用easyui编写后台框架时,遇到一个头疼的问题,就是给datagrid添加一个搜索框,蛋疼的是官方貌似没有提供相关的方法(有可能是我不知道,如果哪位大神知道,希望能告知). 百度了很久,搜索到一篇博文,是通过prependTo到.datagrid-toolbar的方式,这样子确实是可行的.楼主使用的是tab,在每个tab上面都有一个datagrid,由于楼主是使用js动态添加节点,所以面临了一个问题,就是easyui给所有datagrid的toolbar生成的dom的class(好绕:

WPF—QQ界面(三):联系人搜索框和个性签名一栏的效果实现

由于过年回家,家里没网,好几个月没写了.昨晚刚回实验室,今天接着写. 首先分析搜索框和个性签名一栏的效果: 1.搜索框平常时框内有一行文字用来提示搜索的内容,当鼠标左键单击会使框内文字清空,并有光标闪烁: 2.个性签名一栏平常时也有一行文字,内容就是你的个性签名啦,当鼠标单击时,会使整个框的文字内容全选,此时可以随意更改你的个性签名. 3.两者还有一个共同特点:当鼠标移到搜索框和个性签名框,都会在鼠标的下方出现一行提示文字. 先贴搜索框的代码: 前台: <TextBox x:Name="t

个性搜索框

1.很久之前在网上看到的,就随手保存起来了. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>8款纯