最近写了一个搜索界面 关于去除搜索记录重复值的问题
当时没有想到怎么去掉重复值,最后发现如果重复了让他直接return跳转出去就可以了.但是前提是 需要先把 搜索跳转写到return 的前边,要不然当搜索重复之后就会直接return 这样搜索结果就不会有了
写了return之后后边的代码就不会执行了
这个是js代码:
$(function(){
// 先定义一个空数组
var arr=[];
// 搜索点击事件
$('#search-btn').on('click',function(){
var val = $(this).siblings('input').val();
// alert(val);
if (val && val.trim() != '') {
location.href = 'search-list.html?key='+val;
for (var i =0;i<arr.length;i++) {
// alert(arr[1]);
// 判断是否有相同值在数组中
if (arr[i]==val) {
return;
}
}
arr.push(val);
// 将关键字存储在本地
localStorage.setItem('arr',JSON.stringify(arr));
console.log(arr);
// alert(localStorage.getItem(arr))
} else {
alert('请输入要搜索的内容');
return;
}
});
if (localStorage.getItem('arr')){
// console.log(1);
arr=JSON.parse(localStorage.getItem('arr'));
console.log(arr);
var html = template('history_p', { result: arr })
// console.log(html);
$('#history_items').html(html);
}
$('#btn_clear').on('click',function(){
$('#history_items').html('');
localStorage.removeItem('arr');
})
})
这个是html页面:
用到了mui里面的一些插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>搜索</title>
<link rel="stylesheet" href="assets/mui/css/mui.css">
<link rel="stylesheet" href="assets/fontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/search.css">
<script src="assets/mui/js/mui.min.js"></script>
<script src="assets/zepto/zepto.min.js"></script>
<script src="js/search.js"></script>
<script src="assets/artTemplate/template-web.js"></script>
<script src="js/public.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav my-header">
<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
<h1 class="mui-title">搜索</h1>
<!-- <a href="" class="mui-icon mui-icon-search mui-pull-right"></a> -->
</header>
<nav class="mui-bar mui-bar-tab footer my-footer">
<a class="mui-tab-item mui-active" href="index.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="category.html">
<span class="mui-icon mui-icon-bars"></span>
<span class="mui-tab-label">分类</span>
</a>
<a class="mui-tab-item" href="cart.html">
<span class="mui-icon fa fa-shopping-cart"></span>
<span class="mui-tab-label">购物车</span>
</a>
<a class="mui-tab-item" href="user.html">
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label">会员中心</span>
</a>
</nav>
<div class="mui-content">
<div class="contain">
<div class="search">
<input type="text" placeholder="请输入搜索的商品" name="proName">
<input type="button" value="搜索" id="search-btn">
</div>
<div class="history mui-clearfix">
<span class="mui-pull-left">搜索历史</span>
<span class="mui-pull-right" id="btn_clear">清空历史</span>
</div>
<ul class="mui-table-view history_items" id="history_items">
<!-- <li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li> -->
</ul>
</div>
</div>
<script type="text/template" id="history_p">
<% for(var i=0;i<result.length;i++){ %>
<li class="mui-table-view-cell"><%=result[i] %></li>
<% } %>
</script>
</body>
</html>