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[1];
          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[1];
          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[1];
          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[0]['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[i]['forum_path']+'" target="_blank">['+jsObject[i]['forumname']+']</a>';
                    htmlstr+='</td><th><span>'+'<a href="'+jsObject[i]['path']+'" target="_blank">'+jsObject[i]['subject']+'</a></span>';
                    if(jsObject[i]['attachment']==1){
                        htmlstr+='<img src="http://bbs.auto.sina.com.cn/images/attachicons/common.gif" alt="附件" />';
                    }
  		            htmlstr+='</th><td class="author"><cite>';
                        if(jsObject[i]['authorid'] && jsObject[i]['author']){
                            htmlstr+='<a href="space.php?uid='+jsObject[i]['authorid']+'">'+jsObject[i]['author']+'</a>';
                        }
                    htmlstr+='</cite><em>'+jsObject[i]['dateline']+'</em></td>';
                    htmlstr+='<td class="nums"><strong>'+jsObject[i]['replies']+'</strong> / <em>'+jsObject[i]['views']+'</em></td>';
                    htmlstr+='<td class="lastpost"><em><a href="redirect.php?tid='+jsObject[i]['tid']+'&goto=lastpost$highlight#lastpost">'+jsObject[i]['lastpost']+'</a></em>';
                    htmlstr+='<cite>by';
				    if(jsObject[i]['lastposter']){
				        htmlstr+=jsObject[i]['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[0]['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;
}