搜索页面效果
需求分析：
1.默认显示搜索历史记录，搜索记录倒序排列且去除重复值。
2.点击搜索后，显示搜索列表，历史记录隐藏。
3.搜索值变化时，列表隐藏。搜索值为空时，历史记录显示。
4.点击历史记录，进行相应的搜索。点击删除时清空搜索历史记录
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.container {
padding: 0 4vw
}
.search {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 5.067vw
}
.input-container {
position: relative
}
.input-container span {
position: absolute;
/* top: 1.867vw; */
width: 4.8vw;
/* height: 4.8vw; */
}
.input-container .search-icon {
left: 4.267vw;
top: 1.967vw;
}
.input-container .search-icon svg,
.input-container .cancel-icon svg {
width: 4.8vw;
height: auto;
}
.input-container .cancel-icon {
right: 4.267vw;
top: 2.1vw;
}
.search input {
width: 82.4vw;
height: 8.533vw;
padding-left: 11.2vw;
border-radius: 45.867vw;
background: #f7f7f7;
float: right;
border: none;
outline: medium;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.search button {
font-size: 3.7vw;
color: #444;
background: none;
border: none
}
.history {
padding-bottom: 4.267vw;
background: #fff;
-webkit-box-shadow: 0 -1px rgba(0, 0, 0, .07843) inset;
box-shadow: inset 0 -1px rgba(0, 0, 0, .07843)
}
.history .title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 3.733vw 0 5.333vw
}
.history .title span {
color: #444;
font-family: PingFang SC;
font-weight: 700;
font-size: 4.267vw
}
.history .title img {
width: 4.4vw;
height: auto;
}
.history .delete {
width: 4.4vw;
height: auto;
}
.history .delete svg {
width: 4.4vw;
height: auto;
}
span svg {
width: 100%;
}
.history-list li {
display: inline-block;
padding: 1.067vw 3.2vw;
color: #666;
background: #f7f7f7;
border-radius: 7.733vw;
margin-bottom: 3.2vw
}
.all,
.history-list li {
text-align: center;
font-family: PingFang SC;
font-weight: 500;
font-size: 3.733vw
}
.all {
padding-top: 1.067vw;
color: #999
}
/* 列表 */
.item {
padding: 3.2vw 4vw;
margin-top: 4.8vw;
background-color: #fff;
border-radius: 2.133vw;
-webkit-box-shadow: 0 0 1.067vw rgba(0, 0, 0, .12157);
box-shadow: 0 0 1.067vw rgba(0, 0, 0, .12157)
}
.item a {
display: block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-decoration: none;
}
.item .item-image {
width: 25.6vw;
height: 34.133vw;
border-radius: 1.067vw;
}
.item-image img {
width: 100%;
height: 100%
}
.item .item-intro {
float: right;
width: 55.2vw;
height: 34.133vw;
-webkit-box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
box-sizing: border-box
}
.intro-top .intro-title {
color: #444;
font-family: PingFang SC;
font-weight: 700;
font-size: 4.267vw
}
.intro-top .intro-type {
padding-top: 3.2vw;
color: #999;
font-family: PingFang SC;
font-weight: 500;
font-size: 3.733vw
}
.price {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #ed9027;
font-family: PingFang SC;
font-weight: 700;
font-size: 4.267vw
}
button {
border: none
}
.intro-bottom {
color: #ed9027
}
.pre-order {
float: right;
margin-right: 4vw;
width: 12.8vw;
height: 6.4vw;
border-radius: 3.2vw;
background: #ed9027;
font-size: 3.2vw;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #fff
}
/* 搜索框去掉默认取消按钮 */
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* ios自带搜索图标 */
input[type="search"] {
-webkit-appearance: none;
}
input::-webkit-search-cancel-button {
display: none;
}
.attention {
display: none;
text-align: center;
font-size: 3.2vw;
margin-top: 4vw;
padding-top: 1.067vw;
color: #999;
}
</style>
</head>
<body>
<div class="container">
<div class="search">
<div class="input-container">
<input type="search" placeholder="请输入您要搜索的内容" onsearch="searchData()" class="search-val"
oninput="changeVal()">
<span class="search-icon">
<svg t="1661304760463" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3718" width="200" height="200">
<path
d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z"
p-id="3719" fill="#8a8a8a"></path>
</svg>
</span>
<!-- <img class="search-icon"
src="../addons/hedawei_shopv2/template/mobile/default/static/images/hedawei/sear.png" alt=""> -->
<!-- <img class="cancel-icon"
src="../addons/hedawei_shopv2/template/mobile/default/static/images/hedawei/cancel.png" alt=""> -->
<span class="cancel-icon">
<svg t="1661305053945" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4672" width="200" height="200">
<path
d="M512 896c212.1 0 384-171.9 384-384S724.1 128 512 128 128 299.9 128 512s171.9 384 384 384z m-0.8-427.3l150.3-150.3 45.2 45.2L556.5 514l147.3 147.3-45.2 45.2-147.4-147.3-146 146L320 660l146-146-149.6-149.6 45.2-45.2 149.6 149.5z"
p-id="4673" fill="#8a8a8a"></path>
</svg>
</span>
</div>
<button type="submit" class="cancel">取消</button>
</div>
<div class="list">
<ul>
<!-- <li class="item">
<a href="">
<div class="item-image">
<img src="" alt="">
</div>
<div class="item-intro">
<div class="intro-top">
<p class="intro-title">密室逃脱</p>
<p class="intro-type">悬疑 | 惊恐 </p>
</div>
<div class="intro-bottom">
<p>
<span>￥198/人</span>
<button class="pre-order">预定</button>
</p>
</div>
</div>
</a>
</li> -->
</ul>
</div>
<p class="attention">暂无数据</p>
<div class="history">
<div class="title">
<p>历史记录</p>
<span class="delete">
<svg t="1661304680168" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2624" width="200" height="200">
<path
d="M909.050991 169.476903l-217.554898 0 0-31.346939c0-39.5866-32.205493-71.792093-71.793116-71.792093L408.15591 66.337871c-39.5866 0-71.792093 32.205493-71.792093 71.792093l0 31.346939L113.349581 169.476903c-11.013845 0-19.942191 8.940626-19.942191 19.954471s8.928347 19.954471 19.942191 19.954471l84.264149 0 0 640.687918c0 60.479443 49.203632 109.683075 109.683075 109.683075l416.474366 0c60.479443 0 109.683075-49.203632 109.683075-109.683075L833.454246 209.385844l75.595722 0c11.012821 0 19.942191-8.940626 19.942191-19.954471S920.063813 169.476903 909.050991 169.476903zM376.2482 138.130987c0-17.593703 14.314007-31.907711 31.907711-31.907711l211.547067 0c17.593703 0 31.907711 14.314007 31.907711 31.907711l0 31.346939L376.2482 169.477926 376.2482 138.130987zM793.569864 850.074785c0 38.486546-31.312146 69.798692-69.798692 69.798692L307.297828 919.873478c-38.486546 0-69.798692-31.312146-69.798692-69.798692L237.499136 211.042577l556.070728 0L793.569864 850.074785z"
p-id="2625" fill="#8a8a8a"></path>
<path
d="M510.662539 861.276918c11.012821 0 19.954471-8.92937 19.954471-19.942191L530.61701 294.912753c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191L490.708068 841.334727C490.708068 852.347548 499.649717 861.276918 510.662539 861.276918z"
p-id="2626" fill="#8a8a8a"></path>
<path
d="M374.562814 801.449321c11.012821 0 19.954471-8.92937 19.954471-19.942191L394.517285 354.74035c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191l0 426.76678C354.608344 792.519951 363.549993 801.449321 374.562814 801.449321z"
p-id="2627" fill="#8a8a8a"></path>
<path
d="M649.832182 801.449321c11.012821 0 19.954471-8.92937 19.954471-19.942191L669.786653 354.74035c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191l0 426.76678C629.877711 792.519951 638.81936 801.449321 649.832182 801.449321z"
p-id="2628" fill="#8a8a8a"></path>
</svg>
</span>
<!-- <img src="../addons/hedawei_shopv2/template/mobile/default/static/images/hedawei/delete.png" alt=""
class="delete"> -->
</div>
<ul class="history-list">
<!-- <li>测试数据11111</li> -->
</ul>
<p class="all">全部历史记录</p>
</div>
</div>
<script type="text/javascript" src="../addons/hedawei_shopv2/static/js/dist/jquery/jquery-1.11.1.min.js"></script>
<script>
storage()
// 历史记录本地存储
let history = localStorage.getItem('history') || ''
function searchData() {
let temp = $('.search-val').val()
if (temp) {
history = history.length ? `${temp},${history}` : `${temp}`
localStorage.setItem('history', history)
storage()
getData()
}
$('.history').css('display', 'none')
// window.location.href=`http://hdong.com/app/index.php?i=36&c=entry&m=hedawei_shopv2&do=mobile&r=ssresult&search=${temp}`
// window.location.href = "{php echo mobileUrl('ssresult')}&search=" + temp;
}
$('.delete').click(function () {
localStorage.removeItem('history')
$('.history-list').empty()
history = []
})
// 搜索内容清空
$('.cancel-icon').click(function () {
// console.log($('.search-val').val(), 'val');
$('.search-val').val('')
$('.history').css('display', 'block')
$('.list ul').css('display', 'none')
$('.attention').css('display', 'none')
})
// 返回上一页
$('.cancel').click(function () {
window.history.go(-1)
})
function getData() {
$.ajax({
url: "{php echo mobileUrl('goodsall')}",
type: 'get',
dataType: 'json',
data: {
words: $('.input-container input').val(), //非必须 标题搜索
categoryid: '' //非必须 分类id搜索
},
success: function (data) {
// console.log(data)
// 动态添加元素
$('.list ul').html("");
if (!data.length) {
$('.attention').css('display', 'block')
} else {
$('.attention').css('display', 'none')
data.forEach(ele => {
$('.list ul').append(`
<li class="item">
<a href="{php echo mobileUrl('goods/detail')}&id=${ele.id}">
<div class="item-image">
<img src="${ele.thumb}" alt="">
</div>
<div class="item-intro">
<div class="intro-top">
<p class="intro-title">${ele.title}</p>
<p class="intro-type">${ele.keywords} </p>
</div>
<div class="intro-bottom">
<p>
<span>￥${ele.marketprice}/人</span>
<button class="pre-order" >预订</button>
</p>
</div>
</div>
</a>
</li>`)
})
}
}
})
}
function changeVal() {
let searchVal = $('.search-val').val()
// console.log(searchVal, 'searchVal');
if (searchVal == '') {
// 输入值为空时，历史记录显示
$('.history').css('display', 'block')
$('.list ul').css('display', 'none')
$('.attention').css('display', 'none')
} else {
$('.history').css('display', 'none')
$('.list ul').css('display', 'block')
$('.list ul').html("");
}
}
function storage() {
let currentHistory = localStorage.getItem('history') || ''
$('.history-list').empty()
if (currentHistory.length) {
let tempResult = currentHistory.split(',')
let tempResu = [...new Set(tempResult)]
for (const item of tempResu) {
$('.history-list').append(`
<li>${item}</li>
`)
}
}
}
// 历史记录点击搜索
$('.history-list').on('click', 'li', function () {
let searchVal = $(this).html()
$('.search-val').val(searchVal)
$('.list ul').css('display', 'block')
searchData()
})
</script>
</body>
</html>
