thinkphp搜索实现
视图：
<html lang="zh-cn"><head> <meta charset="UTF-8">
<title>测试</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<link rel="stylesheet" href="{$Think.config.img_site}weixin/mui/css/mui.min.css" />
<style>
.top-container{height: 101px;background-color: #0E5B74;position: relative;padding-right: 15px;overflow: hidden;}
.top-container .avatar.index{padding: 0;height: 70px;width: 70px;}
.top-container .avatar{float: left;margin: 16px 15px;width: 60px;height: 60px;padding: 5px;background-color: #0799ff;border-radius: 50px;position: relative;}
.top-container .avatar.index img{height: 71px;width: 71px;border-radius: 40px;}
.top-container .avatar img{height: 60px;width: 60px;border-radius: 30px;}
.top-container .account-info{padding: 20px 70px 0 0;text-align: center;overflow: hidden;height: 76px;}
.top-container .account-info .name{color: #fff;}
.top-container .account-info .name{font-size: 20px;color: #fff;text-overflow: ellipsis;white-space: nowrap;}
.top-container .account-info .desc{color: #aaa;}
.top-container .account-info .desc{color: #607fa6;margin-top: 10px;font-size: 14px;line-height: 24px;height: 24px;width: 100%;overflow: hidden;white-space: nowrap;}
.button-follow-container{position: absolute;bottom: 10px;right: 15px;padding: 0;}
.top-container .account-info .desc{color: #aaa;}
.top-container .account-info .desc{color: #aaa;margin-top: 10px;font-size: 14px;line-height: 24px;height: 24px;width: 100%;overflow: hidden;white-space: nowrap;}
.button-follow-container{position: absolute;bottom: 10px;right: 15px;padding: 0;}
.button-follow-container img{height: 18px;width: 64px;}
.article-item{border-bottom: 1px #e9e9e9 solid;clear: both;overflow: hidden;}
.article-item a{color: #111;display: block;height: 73px;}
.item-cover{float: left;margin: 7px 10px 5px 10px;width: 80px;text-align: center;border: 0;overflow: hidden;height: 60px;background: #e0e0e0;}
.item-cover img{width: 80px;height: 60px;}
.item-summary{padding: 7px 10px 7px 5px;overflow: hidden;min-height: 48px;}
.item-title{min-height: 30px;max-height: 40px;line-height: 20px;overflow: hidden;word-wrap: break-word;word-break: break-all;}
.item-text{margin-top: 5px;font-size: 12px;color: #808080;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.item-text .item-text-right{float: right;padding-left: 20px;}
span.mui-icon{font-size: 14px;color: #007aff;margin-left: -15px;padding-right: 10px;}
.mui-off-canvas-right{color: #fff;}
.title{margin:25px 15px 10px;}
.weui-footer{color:#999999;font-size:14px;text-align: center;margin-bottom:60px;margin-top:10px;}
.weui-footer p{padding:0;margin:0;}
.weui-footer a {color: #586C94;}
.weui-footer__link {display: inline-block; vertical-align: top;margin: 0 .32em;position: relative;font-size: 14px;}
.weui-footer__text {padding: 0 .34em; font-size: 12px;}
/*底部*/
.foot{position:fixed;bottom: 0;left: 0;right: 0;background: rgba(0,135,251,0.9);height:50px;color: #fff;font-size: 13px;}
.foot .people{width: 43%;float: left;border-right:1px solid #37a1fc;height: 50px;}
.foot .people .people_tx{width: 40px;height: 40px;display: inline-block;border: 1px solid #fff;border-radius: 50%;margin-top: 4px;margin-left: 10px;float: left;}
.foot .people .people_tx img{width: 100%;border-radius: 50%;height: 100%;}
.foot .people .font{float: left;margin-left: 10px;margin-top: 10px;}
.foot .people .font small{font-size: 10px;}
.foot .phone{width:28%;float:left;border-right:1px solid #37a1fc;height: 50px;text-align: center;padding-top: 15px;line-height:18px;}
.foot .weizhan{width:28%;float: left;height: 50px;text-align:center;padding-top: 15px;line-height:18px;}
.foot .phone img,.foot .weizhan img{width: 20px;}
.foot a{color:#fff;}
</style>
</head>
<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
<aside id="offCanvasSide" class="mui-off-canvas-right">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title" id="offCanvasHide" >图文</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<volist name="news" id="vo"><li class="mui-table-view-cell"><a class="mui-navigate-right">{$vo.name}</a></li></volist>
</ul>
<form action="http://m.baoxianbox.cn/index.php?c=Index&a=lis" method="post">
<div class="mui-input-row mui-search">
<input type="search" placeholder="输入关键字搜索内容" name="key" class="mui-input-clear"/>
</div>
</form>
</div>
</div>
</aside>
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<span id="offCanvasShow" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></span>
<h1 class="mui-title">文章</h1>
</header>
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-content-padded">
<?php if(!$search){
$name="list";
}else{
$name="search";
}
?>
<volist name="$name" id="vo">
<div class="article-item">
<a href="/?a=weixin&uid={$_GET['uid']}&id={$vo.id}">
<div class="item-cover"><img src="{:tomedia($vo['thumb'])}"></div>
<div class="item-summary"><div class="item-title">{$vo.title}</div><div class="item-text">{:date("m-d H:i", $vo['createtime'])}<span class="item-text-right">{$vo.click}</span></div></div>
</a></div></volist>
</div>
</div>
</div>
</div>
</div>
<script src="{$Think.config.img_site}weixin/mui/js/mui.min.js"></script>
<script src="{$Think.config.img_site}weixin/js/jquery-1.7.2.min.js"></script>
<script>
mui.init({pullRefresh: {container: '#offCanvasContentScroll',up: {contentrefresh: '正在加载...',callback: pullupRefresh}}});
mui('body').on('tap','a',function(){document.location.href=this.href;});
//侧滑容器父节点
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//菜单容器
var offCanvasSide = document.getElementById("offCanvasSide");
//移动效果是否为整体移动
var moveTogether = false;
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
var classList = offCanvasWrapper[0].classList;
//变换侧滑动画移动效果；
document.getElementById('offCanvasShow').addEventListener('tap', function() {offCanvasWrapper.offCanvas('show');});
document.getElementById('offCanvasHide').addEventListener('tap', function() {offCanvasWrapper.offCanvas('close');});
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
//实现ios平台的侧滑关闭页面；
if (mui.os.plus && mui.os.ios) {
offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
plus.webview.currentWebview().setStyle({'popGesture': 'none'});
});
offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
plus.webview.currentWebview().setStyle({'popGesture': 'close'});
});
}
var count=2;
function pullupRefresh() {
setTimeout(function() {
mui('#offCanvasContentScroll').pullRefresh().endPullupToRefresh((++count >30)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-content-padded');
var cells = document.body.querySelectorAll('.article-item');
mui.post("/api.php?c=home&a=newsfrom",{page:count},function(res){
if(res.err == 0){
var datas=res.data;var $li='';
for(var i = 0; i < datas.length; i++){
var data = datas[i];
var div = document.createElement('div');
div.className = 'article-item';
div.innerHTML = "<a href=\"/?a=weixin&uid={$_GET['uid']}&id=" + data.id + '"><div class="item-cover"><img src="' + data.thumb + '"></div><div class="item-summary"><div class="item-title">' + data.title + '</div><div class="item-text">' + data.createtime + '<span class="item-text-right">阅读：' + data.click + '</span></div></div></a>';
table.appendChild(div);}
}
else{mui.toast('列表内容获取失败！'); }},'json');
}, 1500);
}
mui(".sea2").addEventListener("tap",function(){
var table1 = document.body.querySelector('.mui-content-padded');
var sea = mui('.sea')[0].value;
mui.post("http://m.baoxianbox.cn/index.php?c=Index&a=lis",{p:sea},function(res){
if(res.err == 0){
$(".mui-content-padded").hide();
var datas=res.data;var $li='';
for(var i = 0; i < datas.length; i++){
var data = datas[i];
var div = document.createElement('div');
div.className = 'article-item';
div.innerHTML = "<a href=\"/?a=weixin&uid={$_GET['uid']}&id=" + data.id + '"><div class="item-cover"><img src="' + data.thumb + '"></div><div class="item-summary"><div class="item-title">' + data.title + '</div><div class="item-text">' + data.createtime + '<span class="item-text-right">阅读：' + data.click + '</span></div></div></a>';
table1.appendChild(div);}
}
else{mui.toast('列表内容获取失败！'); }},'json');
})
</script>
<div style="display:none;"><script src="https://s13.cnzz.com/z_stat.php?id=1262667763&web_id=1262667763" language="JavaScript"></script></div>
</body></html>
控制器：
public function lis()
{ $user = M('members')->find($_GET['uid']);
if(empty($_SESSION['topid'])){$_SESSION['topid']=$user['topid'];$_SESSION['firid']=$_GET['uid'];$_SESSION['secid']=$user['firid'];}
$list = M('article')->where("ischeck=1")->limit(10)->order('id desc')->select();
$news = M('category')->where("class='news'")->select();
$study = M('category')->where("class='study'")->select();
$this->assign('news', $news);
$this->assign('study', $study);
$this->assign('list',$list);
$this->assign('user',$user);
if($_POST['key']){
$key = $_POST['key'];
$map['title|content'] = array('like','%'.$key .'%');
$res1 = M('article')->where($map )->select();
$this->assign('search', $res1);
}
$this->display();
}
