效果地址:http://www.seetao.com/m_search.html 手机端
html:
<body>
<div class="search_top">
<img src="__IMG__/search_icon2.png" class="search_fang" />
<input type="hidden" name="show" value="1" />
<input name="keywords" id="keywords" type="text" placeholder="{:L('Search_content_interest')}" value="{$keywords}" class="input_search input_top" onkeyup="this.value=this.value.replace(/[, ]/g,'')"/>
<a class="search_cancel" id="search">{:L('search')}</a>
<a href="{$return_url}" class="search_back">{:L('cancel')}</a>
</div>
<div class="search_null" style="display: none;">
<img src="__IMG__/collect.png" />
<p style="text-align: center;margin-top:-2rem;font-size:0.45rem;color: #999999;">{:L('Nothing')}</p>
</div>
<div class="history">
<div class="history_top" >
<span class="search_history">{:L('history')}</span>
<span class="del" id="empty">{:L('Clear_history')}</span>
</div>
<div class="contain">
<div class="fr" id="history"></div>
</div>
</div>
<div id="content">
<eq name="show" value="1">
<if condition="$article_list">
<foreach name="article_list" item="vo">
<a href="{$vo['link']}">
<dl class="index_project">
<dt><img src="{$vo['image_url']}" /></dt>
<dd>{$vo['theme']}</dd>
<dd>
<span class="index_shuoming">{$vo['description']}</span>
</dd>
</dl>
</a>
</foreach>
</if>
<if condition="$more gt 0">
<div id='msg' style='text-align: center'>
<span>{:L('Slide_up_more')}</span>
</div>
<else />
<if condition="$article_list">
<div id='msg' style='text-align: center'>
<span>{:L('No_more')}</span>
</div>
<else />
<div class="search_null">
<img src="__IMG__/collect.png" />
<p style="text-align: center;margin-top:-2rem;font-size:0.45rem;color: #999999;">{:L('Nothing')}</p>
</div>
</if>
</if>
</eq>
</div>
</body>
css:
<style>
body{
font-size: 0.35rem;
}
.search_top input{
padding-left: 0.65rem;
}
.search_back{
display: block;
margin-left: 0;
margin-top: 0.2rem;
}
.history_top{
font-size: 0.28rem;
color: #000;
width: 6.9rem;
margin-left: 0.3rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.contain{
font-size: 0.26rem;
color: #9B9C9E;
width: 6.9rem;
margin-left: 0.3rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.search_top{
margin-bottom: 0.52rem;
}
.fr{
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.fr a,.fr p{
width: auto;
height: 0.68rem;
border:1px solid rgba(204,204,204,1);
border-radius:0.08rem;
margin-right: 0.2rem;
margin-bottom: 0.2rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.2rem;
}
.search_dianji{
color: #CCCCCC;
}
.search_back{
width: auto;
display: none;
font-size: 0.3rem;
}
</style>
js:
<script type="text/javascript">
var $keywords = "{$keywords}";
var $start = "{$start}";
var $more = "{$more}";
var $point_time = "{$point_time}";
var $load = true;
var $result = false;
var $show = "{$show}";
$(function () {
//点击搜索功能
$(".search_cancel").click(function () {
$keywords = $('.input_search').val();
$start = 0;
if ($load) {
$load = false;
$('.search_null').css({ 'display': 'none' });
$.ajax({
type: 'GET',
data: { 'keywords': $keywords, 'start': $start, 'point_time': $point_time},
url: "{:U('Article/search');}",
dataType: 'json',
success: function (data) {
if (data['status'] == 1) {
$result = data['data'];
var $html = setData();//处理数据
if ($result['article_list'].length > 0) {
if ($result['more'] == 1) {
$html += "<div id='msg' style='text-align: center'><span>{:L('Slide_up_more')}</span></div>";
} else {
$html += "<div id='msg' style='text-align: center'><span>{:L('No_more')}</span></div>";
}
//延迟1秒加载
setTimeout(function () {
$start = $result['start'];
$more = $result['more'];
$point_time = $result['point_time'];
$load = true;
$('#content').html($html);
}, 1000);
} else {
$start = $result['start'];
$more = $result['more'];
$load = true;
$('#content').html($html);
$('.search_null').css({ 'display': 'block' });
}
} else {
$more = 0;
$load = true;
}
},
error: function (xhr, type) {
$more = 0;
$load = true;
}
});
}
});
$(window).scroll(function () {
if ($(window).scrollTop() >= ($(document).height() - $(window).height()) / 2) {
$keywords = $('.input_search').val();
if ($more == 1 && $load) {
$load = false;
$('#msg').html($('#msgLoad').html());
$.ajax({
type: 'GET',
data: { 'keywords': $keywords, 'start': $start, 'point_time': $point_time},
url: "{:U('Article/search');}",
dataType: 'json',
success: function (data) {
if (data['status'] == 1) {
$result = data['data'];
var $html = setData();//处理数据
//延迟1秒加载
setTimeout(function () {
$start = $result['start'];
$more = $result['more'];
$point_time = $result['point_time'];
$load = true;
$('#msg').before($html);
if ($more == 1) {
$('#msg').html($('#msgFirst').html());
} else {
$('#msg').html($('#msgEnd').html());
}
}, 1000);
} else {
$more = 0;
$load = true;
$('#msg').html($('#msgEnd').html());
}
},
error: function (xhr, type) {
$more = 0;
$load = true;
$('#msg').html($('#msgEnd').html());
}
});
}
}
});
});
function setData() {
var $html = '';
if ($result) {
for (var $i = 0; $i < $result['article_list'].length; $i++) {
$html += "<a href='" + $result['article_list'][$i]['link'] + "'><dl class='index_project'>"
+ "<dt><img src=" + $result['article_list'][$i]['image_url'] + "></dt>"
+ "<dd>" + $result['article_list'][$i]['theme'] + "</dd>"
+ "<dd>"
+ "<span class='index_shuoming'>" + $result['article_list'][$i]['description'] + "</span>"
+ "</dl></a>";
}
}
return $html;
}
// 上滑遮罩层
$(".share").click(function(){
$("transition").css("display","block");
})
$(".cancel").click(function(){
$("transition").css("display","none");
})
function toshare() {
$(".am-share2").addClass("am-modal-active");
if ($(".sharebg").length > 0) {
$(".sharebg").addClass("sharebg-active");
} else {
$("body").append('<div class="sharebg"></div>');
$(".sharebg").addClass("sharebg-active");
}
$(".sharebg-active,.share_btn").click(function () {
$(".am-share2").removeClass("am-modal-active");
setTimeout(function () {
$(".sharebg-active").removeClass("sharebg-active");
$(".sharebg").remove();
}, 300);
})
}
//搜索和取消按钮
$(".search_cancel").css('display','none')
$(".search_back").css('display','block')
$(".input_search").bind("input propertychange",function(event){
var inp_len = $(".input_search").val().length
console.log(inp_len)
console.log($(".input_search").val())
if(inp_len == 0){
$(".search_cancel").css('display','none')
$(".search_back").css('display','block')
}else{
$(".search_cancel").css('display','block')
$(".search_back").css('display','none')
}
})
//点击历史记录的文字可以搜索
$(".fr").on('click','.btn-default',function(){
$(".history").css('display','none')
// var tem=obj
// var word=$(tem).text();
// setWorld(word);
var $keywordss = $(this).text();
$start = 0;
if ($load) {
$load = false;
$('.search_null').css({ 'display': 'none' });
$.ajax({
type: 'GET',
data: { 'keywords': $keywordss, 'start': $start, 'point_time': $point_time},
url: "{:U('Article/search');}",
dataType: 'json',
success: function (data) {
if (data['status'] == 1) {
$result = data['data'];
var $html = setData();
if ($result['article_list'].length > 0) {
if ($result['more'] == 1) {
$html += "<div id='msg' style='text-align: center'><span>{:L('Slide_up_more')}</span></div>";
} else {
$html += "<div id='msg' style='text-align: center'><span>{:L('No_more')}</span></div>";
}
//延迟1秒加载
setTimeout(function () {
$start = $result['start'];
$more = $result['more'];
$point_time = $result['point_time'];
$load = true;
$('#content').html($html);
}, 1000);
} else {
$start = $result['start'];
$more = $result['more'];
$load = true;
$('#content').html($html);
$('.search_null').css({ 'display': 'block' });
}
} else {
$more = 0;
$load = true;
}
},
error: function (xhr, type) {
$more = 0;
$load = true;
}
});
}
})
</script>
< !-- <script type="text/javascript">
//取值写入页面
$(function(){
//历史记录
var str=localStorage.historyItems;
var s = '';
var strs= [];
strs=str.split("|");
for(var i=0;i<strs.length;i++){
s += "<p class='search_dianji search_cancel' οnclick='dianji()'>"+strs[i]+"</p>";
}
$(".contain .fr").html(s);
$('.history_top').show();
});
//点击历史记录的文字可以搜索
$(".fr").on('click','.search_dianji',function(){
$(".history").css('display','none')
// var tem=obj
// var word=$(tem).text();
// setWorld(word);
var $keywordss = $(this).text();
$start = 0;
if ($load) {
$load = false;
$('.search_null').css({ 'display': 'none' });
$.ajax({
type: 'GET',
data: { 'keywords': $keywordss, 'start': $start, 'point_time': $point_time},
url: "{:U('Article/search');}",
dataType: 'json',
success: function (data) {
if (data['status'] == 1) {
$result = data['data'];
var $html = setData();
if ($result['article_list'].length > 0) {
if ($result['more'] == 1) {
$html += "<div id='msg' style='text-align: center'><span>{:L('Slide_up_more')}</span></div>";
} else {
$html += "<div id='msg' style='text-align: center'><span>{:L('No_more')}</span></div>";
}
//延迟1秒加载
setTimeout(function () {
$start = $result['start'];
$more = $result['more'];
$point_time = $result['point_time'];
$load = true;
$('#content').html($html);
}, 1000);
} else {
$start = $result['start'];
$more = $result['more'];
$load = true;
$('#content').html($html);
$('.search_null').css({ 'display': 'block' });
}
} else {
$more = 0;
$load = true;
}
},
error: function (xhr, type) {
$more = 0;
$load = true;
}
});
}
// }
})
// 按键盘的回车搜索东西
function keyup_submit(e){
var evt = window.event || e;
if (evt.keyCode == 13){
var key=JSON.parse(localStorage.getItem("key"));
$(".history").css('display','none')
$keywords = $('.input_search').val();
$start = 0;
if ($load) {
$load = false;
$('.search_null').css({ 'display': 'none' });
$.ajax({
type: 'GET',
data: { 'keywords': $keywords, 'start': $start, 'point_time': $point_time},
url: "{:U('Article/search');}",
dataType: 'json',
success: function (data) {
if (data['status'] == 1) {
$result = data['data'];
var $html = setData();//处理数据
if ($result['article_list'].length > 0) {
if ($result['more'] == 1) {
$html += "<div id='msg' style='text-align: center'><span>{:L('Slide_up_more')}</span></div>";
} else {
$html += "<div id='msg' style='text-align: center'><span>{:L('No_more')}</span></div>";
}
//延迟1秒加载
setTimeout(function () {
$start = $result['start'];
$more = $result['more'];
$point_time = $result['point_time'];
$load = true;
$('#content').html($html);
}, 1000);
} else {
$start = $result['start'];
$more = $result['more'];
$load = true;
$('#content').html($html);
$('.search_null').css({ 'display': 'block' });
}
} else {
$more = 0;
$load = true;
}
},
error: function (xhr, type) {
$more = 0;
$load = true;
}
});
}
}
}
//按回车的时候记录历史
$('.input_top').on('keydown',function(e){
if(e.keyCode=='13'){
var keyword=$('.input_top').val();
setWorld(keyword);
}
})
// 点击按钮的时候记录历史
$('.search_cancel').on('click',function(e){
location.href='#';
var keyword=$('.input_top').val();
setWorld(keyword);
$(".history").css('display','none')
})
//存值方法,新的值添加在首位
//当为空的时候设置一个关键字进去,判断如果关键字是否存在,不存在就追加新的关键字
function setWorld(keyword){
$('.history_top').show();
var historyItems=localStorage.historyItems
if(historyItems===undefined){
localStorage.historyItems=keyword;
}else{
historyItems=keyword+'|'+historyItems.split('|').filter(e=>e!=keyword).join('|');
localStorage.historyItems=historyItems;
}
}
//清除历史记录
$('.del').click(function(){
localStorage.removeItem('historyItems');
$('.contain .fr').html('');
$('.history_top').hide();
})
$('.del').mouseover(function(){
$(this).css('background','peachpuff')
})
</script> -->
$(function () {
update_history();
// 绑定回车事件
$(document).keydown(function (event) {
if (event.keyCode == 13) {
$("#search").click();
}
});
// 搜索点击事件
$("#search").click(function () {
$(".history").css("display",'none')
var keywords = $("#keywords").val();
search_history(keywords); //添加到缓存
update_history(); //更新搜索历史
})
// 清空搜索历史
$("#empty").click(function () {
mystorage.remove('keywords');
$("#history").html(" ");
})
})
// 更新搜索历史
function update_history() {
var history_keywords = mystorage.get("keywords");
if (history_keywords) {
var html = "";
$.each(history_keywords, function (i, v) {
html += "<a class='btn btn-default' href='javascript:;' role='button'>" + v + "</a>"
})
$("#history").html(html);
};
}
//点击历史按钮同步到输入框
function empty_value(keyword) {
$("#keywords").val(keyword);
}
// 储存历史记录的数组
function search_history(value) {
var data = mystorage.get("keywords");
if (!data) {
var data = []; //定义一个空数组
} else if (data.length === 10) { //搜索历史数量
data.shift(); //删除数组第一个元素有
} else {
};
if (value) { //判断搜索词是否为空
if (data.indexOf(value) < 0) { //判断搜索词是否存在数组中
data.unshift(value); //搜索词添加到数组中
mystorage.set("keywords", data); //存储到本地化存储中
};
};
}
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
};
})();