利用jQuery实现文字记录搜索历史代码



9 35 12



特效描述:利用jQuery实现 文字记录 搜索历史代码,利用jQuery实现文字记录搜索历史代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代码

<div class="col-lg-6" style="margin-top:20px;">
	<div class="input-group">
		<input type="text" class="form-control" id="keywords" placeholder="随便输入查看效果,默认5条">
			<span class="input-group-btn">
				<button class="btn btn-default" id="search" type="button">Go!</button>
			</span>
		</div><!-- /input-group -->
	</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<br><br>
<div style="margin:20px 20px 0px 20px;">
	<span>搜索历史</span>
	<span id="empty">清除历史</span>
</div>
<div style="margin:20px;" id="history">
</div>
<script type="text/javascript">
$(function(){
	update_history();
	// 绑定回车事件
	$(document).keydown(function(event){ 
		if(event.keyCode==13){ 
			$("#search").click(); 
		} 
	}); 
	// 搜索点击事件
	$("#search").click(function(){
		var keywords = $("#keywords").val();
		history(keywords); //添加到缓存
		update_history(); //更新搜索历史
	})
	// 清空搜索历史
	$("#empty").click(function(){
		mystorage.remove('keywords');
		$("#history").html(" ");
	})
})
/**
 * [update_history 更新搜索历史]
 * @return {[type]} [description]
 */
function update_history(){
	console.log(mystorage.get("keywords"));
	var history = mystorage.get("keywords");
	if (history) {
		var html = "";
		$.each(history,function(i,v){
			html += "<a class='btn btn-default' href='javascript:;' role='button'>"+v+"</a>"
		})
		$("#history").html(html);
	};
}
/**
 * [history //搜索历史函数存储]
 * @param  {[type]} value [搜索词]
 * @return {[type]}       [description]
 */
function history(value){  
	var data = mystorage.get("keywords");
	if (!data) {
		var data = []; //定义一个空数组
	}else if(data.length === 5){ //搜索历史数量
		data.shift();  //删除数组第一个元素有
	}else{
	};
	if (value) {  //判断搜索词是否为空
		if (data.indexOf(value)<0) {  //判断搜索词是否存在数组中
			data.push(value);    //搜索词添加到数组中
			mystorage.set("keywords",data);  //存储到本地化存储中
		};
	};
}
/**
 * [mystorage 存储localstorage时候最好是封装一个自己的键值,在这个值里存储自己的内容对象,封装一个方法针对自己对象进行操作。避免冲突也会在开发中更方便。]
 * @param  {String} ){                 var ms [description]
 * @return {[type]}     [description]
		console.log(mystorage.set('tqtest','tqtestcontent'));//存储
		console.log(mystorage.set('aa','123'));//存储
		console.log(mystorage.set('tqtest1','tqtestcontent1'));//存储
		console.log(mystorage.set('tqtest1','newtqtestcontent1'));//修改
		console.log(mystorage.get('tqtest'));//读取
		console.log(mystorage.remove('tqtest'));//删除
		mystorage.clear();//整体清除
 */
var mystorage = (function mystorage(){
	var ms = "mystorage";
	var storage=window.localStorage;
	if(!window.localStorage){
		alert("浏览器不支持localstorage");
		return false;
	}
	var set = function(key,value){
		//存储
		var mydata = storage.getItem(ms);
		if(!mydata){
			this.init();
			mydata = storage.getItem(ms);
		}
		mydata = JSON.parse(mydata);
		mydata.data[key] = value;
		storage.setItem(ms,JSON.stringify(mydata));
		return mydata.data;
	};
	var get = function(key){
		//读取
		var mydata = storage.getItem(ms);
		if(!mydata){
			return false;
		}
		mydata = JSON.parse(mydata);
		return mydata.data[key];
	};
	var remove = function(key){
		//读取
		var mydata = storage.getItem(ms);
		if(!mydata){
			return false;
		}
		mydata = JSON.parse(mydata);
		delete mydata.data[key];
		storage.setItem(ms,JSON.stringify(mydata));
		return mydata.data;
	};
	var clear = function(){
		//清除对象
		storage.removeItem(ms);
	};
	var init = function(){
	  storage.setItem(ms,'{"data":{}}');
	};
	return {
		set : set,
		get : get,
		remove : remove,
		init : init,
		clear : clear
	};
})();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 搜索框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到