php+ajax+mysql论坛帖子异步刷新搜索实现记录
基本布局由属性选择搜索 和 搜索栏输入搜索两部分组成。
一 属性选择搜索
每个属性都是单选的，每次选择属性都会拼url然后异步刷新数据。
获取url的基本函数如下：
//获取完整url
function geturl(){
var level ='&level=';
jQuery(".selectedOp .level a").each(function(){
var tt = $(this).attr("id");
var strs= new Array(); //定义一数组
strs=tt.split("_"); //字符分割
var typeid = strs;
typeid = typeid.substring(typeid.length-1,typeid.length);
level+='_'+typeid;
})
var price ='&price=';
jQuery(".selectedOp .price a").each(function(){
var tt = $(this).attr("id");
var strs= new Array(); //定义一数组
strs=tt.split("_"); //字符分割
var typeid = strs;
typeid = typeid.substring(typeid.length-1,typeid.length);
price+='_'+typeid;
})
var type ='&type=';
jQuery(".selectedOp .type a").each(function(){
var tt = $(this).attr("id");
var strs= new Array(); //定义一数组
strs=tt.split("_"); //字符分割
var typeid = strs;
typeid = typeid.substring(typeid.length-1,typeid.length);
type+='_'+typeid;
})
var url='';
url=level+price+type;
if(url!='&level=&price=&type='){
jQuery(".selectedOp dt").html('你已经选择:');
}
return url;
}
异步提交的基本函数为：
function AjaxGetData(url)
{
$.ajax({
url:"**********.php",
type:"get",
data:url,
dataType:"json",
success:function(jsonDate)
{
var jsObject= eval(jsonDate);
var content=jQuery(".con");
var htmlstr='';
if(jsObject){
htmlstr+='<div class="pages_btns">'+jsObject['multipage']+'</div>';
htmlstr+='<div class="mainbox threadlist"><form><table cellpadding="0" cellspacing="0"><thead class="category"><tr><td width="15"></td><th><dl><dt>排序：</dt><dd class="cur"><a href="#">最新发帖</a></dd><dd> | </dd><dd><a href="#">最后回复</a></dd></dl></th><td class="author">作者</td><td class="nums">回复</td><td class="lastpost">最后发表</td></tr></thead></table><table cellpadding="0" cellspacing="0" class="list">';
for(var i=0;i<jsObject.length;i++){
htmlstr+='<tbody><tr><td class="icon">';
htmlstr+='<a href="'+jsObject['forum_path']+'" target="_blank">['+jsObject['forumname']+']</a>';
htmlstr+='</td><th><span>'+'<a href="'+jsObject['path']+'" target="_blank">'+jsObject['subject']+'</a></span>';
if(jsObject['attachment']==1){
htmlstr+='';
}
htmlstr+='</th><td class="author"><cite>';
if(jsObject['authorid'] && jsObject['author']){
htmlstr+='<a href="space.php?uid='+jsObject['authorid']+'">'+jsObject['author']+'</a>';
}
htmlstr+='</cite><em>'+jsObject['dateline']+'</em></td>';
htmlstr+='<td class="nums"><strong>'+jsObject['replies']+'</strong> / <em>'+jsObject['views']+'</em></td>';
htmlstr+='<td class="lastpost"><em><a href="redirect.php?tid='+jsObject['tid']+'&goto=lastpost$highlight#lastpost">'+jsObject['lastpost']+'</a></em>';
htmlstr+='<cite>by';
if(jsObject['lastposter']){
htmlstr+=jsObject['lastposter'];
}else{
htmlstr+='匿名'+'</cite></td></tr></tbody>';
}
}
}
else{
htmlstr+='<tbody><tr><th colspan="6">对不起，没有找到匹配结果。</th></tr></tbody>';
}
htmlstr+='</table></form></div>';
jQuery(".selectedNums p ").html('找到相关主题<strong>'+jsObject['num']+'</strong>篇');
content.html(htmlstr);
htmlstr='';
}
})
二 解决了异步刷新数据的基本功能后，开始做搜索栏自动补全功能和搜索栏异步刷新的功能。搜索栏自动补全函数为：
//搜索栏补全
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("**********.php?action=getcar", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
搜索框搜索异步刷新函数为：
//搜索框搜索
function getsearch(){
var searchname=$("#inputString").val();
var ispicture=jQuery("#picture").attr('class');
if(ispicture=='current'){
var url='&action=search&picture=1&searchname='+searchname;
}else{
var url='&action=search&picture=0&searchname='+searchname;
}
AjaxGetData(url);
}
现在又遇到了分页的问题，怎么实现分页呢？属性搜索分页和搜索栏分页的实现。。。。(而且中间有出现图片贴和非图片贴的新分类)
一 属性选择分页
//属性搜索分页
function turnpage(page){
var url =geturl();
var ispicture=jQuery("#picture").attr('class');
if(ispicture=='current'){//是否是图片贴
url+='&picture=1';
}else{
url+='&picture=0';
}
url+='&page='+page;
AjaxGetData(url);
}
二 搜索框搜索分页
//搜索框输入搜索分页
function turnpagesearch(page){
var searchname=$("#inputString").val();
var ispicture=jQuery("#picture").attr('class');
if(ispicture=='current'){//是否是图片贴
var url='&action=search&picture=1&searchname='+searchname;
}else{
var url='&action=search&picture=0&searchname='+searchname;
}
url+='&page='+page;
AjaxGetData(url);
}
//快捷搜索
function fastsearch(name){
$("#inputString").val(name);
if(ispicture=='current'){//是否是图片贴
var url='&action=search&picture=1&searchname='+searchname;
}else{
var url='&action=search&picture=0&searchname='+searchname;
}
var url='&action=search&searchname='+name;
AjaxGetData(url);
}
最后补充后台的分页处理函数
function multi_search($num, $perpage, $curpage, $mpurl, $maxpages = 0, $page = 6, $autogoto = TRUE, $simple = FALSE) {
global $maxpage,$aname;
$ajaxtarget = !empty($_GET['ajaxtarget']) ? " ajaxtarget=\"".dhtmlspecialchars($_GET['ajaxtarget'])."\" " : '';
$multipage = '';
//$mpurl .= strpos($mpurl, '?') ? '&' : '?';
$realpages = 1;
if($num > $perpage) {
$offset = 2;
$realpages = @floor($num/$perpage);
if($num % $perpage != 0) $realpages++;
$pages = $maxpages && $maxpages < $realpages ? $maxpages : $realpages;
if($page > $pages) {
$from = 1;
$to = $pages;
} else {
$from = $curpage - $offset;
$to = $from + $page - 1;
if($from < 1) {
$to = $curpage + 1 - $from;
$from = 1;
if($to - $from < $page) {
$to = $page;
}
} elseif($to > $pages) {
$from = $pages - $page + 1;
$to = $pages;
}
}
if ($ajaxtarget) {
$a_name = '';
} else {
$a_name = 'name="AW"';
}
$multipage = ($curpage > 1 && !$simple ? '<a '.$a_name.' style="color:#5783b1" href="'.$mpurl.($curpage - 1).')'.$aname.'" class="prev"'.$ajaxtarget.'>上一页</a>' : '') . ($curpage - $offset > 1 && $pages > $page ? '<a name="AW" style="color:#5783b1" href="'.$mpurl.'1)'.$aname.'" class="first"'.$ajaxtarget.'>1...</a>' : '');
for($i = $from; $i <= $to; $i++) {
$multipage .= $i == $curpage ? '<strong>'.$i.'</strong>' :
'<a '.$a_name.' style="color:#5783b1" href="'.$mpurl.$i.')'.($ajaxtarget && $i == $pages && $autogoto ? '#' : '').$aname.'"'.$ajaxtarget.'>'.$i.'</a>';
}
$multipage .= ($to < $pages ? '<a '.$a_name.' style="color:#5783b1" href="'.$mpurl.$pages.')'.$aname.'" class="last"'.$ajaxtarget.'>...'. $pages .'</a>' : '');//末页
$multipage .= ($curpage < $pages && !$simple ? '<a '.$a_name.' style="color:#5783b1" href="'.$mpurl.($curpage + 1).')'.$aname.'" class="next"'.$ajaxtarget.'>下一页</a>' : '');
$multipage = $multipage ? '<div class="pages"><form>'.(!$simple ? '<em>共'. $pages .'页</em>' : '').$multipage.'</form></div>' : '';
}
$maxpage = $realpages;
return $multipage;
}
页:
[1]