这个是利用wp自带的搜索,和google的ajax搜索不一样。不是完整的方法,折腾了一半没做完,基本可用,只是不是很完美,原理差不多,就是需要一些细节调整。。。好久之前放上去的,最近也没时间优化,拿出来凑凑门面。

例子见我博客右上角的搜索框,效果就是免刷新显示搜索文章结果。

需要修改的就是几个文件:

search.php

顶部<?php  get_header(); ?>改为以下:

<?php
// if AJAX request, only output content section
if(!$_GET['action']) { get_header(); echo '<div id="main">';}
else { defined('DOING_AJAX') || define('DOING_AJAX', true); }
?>

最后<?php get_footer(); ?>改为:

<?php
// if AJAX request, only output content section
if(!$_GET['action']) { get_footer(); }
?>

 

剩余js部分添加ajax效果,注意根据自己模板修改:

var contentCache, searched = false;
jQuery('#searchform').submit(function() {
		var s = jQuery(this).find('#s').val();
		var url = jQuery(this).attr('action') + '?s=' + encodeURIComponent(s) + '&action=search_ajax'
		jQuery.ajax({
		url: url,
		type: 'get',
		dataType: 'html',
		beforeSend: function () {
		var load='<div id="single"><div id="single_area"></div><div class="showdow_bl"><div class="showdow_br"><div class="showdow_b"></div></div></div><div class="entry"><div id="qs-info">Ajax搜索中......</div></div>';
		jQuery('#main').empty().html(load);
	},
		success: function (data) {
		if(searched)
			jQuery('#main').empty().html(data);

	},
		error: function () {
		//jQuery('#search-form span.processing').remove();
		jQuery('#main').empty().html(contentCache);
		searched = false;
	}
	});
	 return false;
});
	var timer, currentKey;
	jQuery('#s').keyup(function() {
		clearTimeout(timer);
		timer = setTimeout(function() {
			var sInput = jQuery('#s');
			var s = sInput.val();
			if(s.length == 0) {
				if(searched) {
					jQuery('#main').empty().html(contentCache);
					sInput.focus();
					//jQuery('#search-form span.processing').remove();
					searched = false;
				}
				currentKey = s;
			} else {
				if(s != currentKey) {
					if(!searched) {
						contentCache = jQuery('#main')[0].innerHTML;
						searched = true;
					}
					currentKey = s;
					if(s !=' ') {jQuery('#searchform').submit();}
				}
			}
		}, 800);
	});

原理就是监测搜索框输入,有值或者按下搜索按钮(id=#s)就请求服务器,返回数据因为排除了头部和尾部,只输出内容。当然这是html的,json方法我不会。。。

已知问题,分页还不知道怎么弄比较好。另外,还仿制了高亮关键词,看看效果。

  1. wmtimes (2010.11.18 at 16:06) 17楼

    不过最好做成google或是baidu搜索框的效果。我觉得那样更好一点。

  2. EIIE (2010.11.23 at 19:04) 18楼

    嗯...这主题蛮吃CPU的...

    • winy() (2010.11.23 at 20:11)

      @EIIE
      是。。。主要是背景

  3. 无冷 (2011.03.20 at 11:11) 19楼

    请教一个问题,如何去优化搜索结果?这个我查了很多东西,还是没有一个好的方法。

    • winy() (2011.03.20 at 11:55)

      @无冷 ,优化?这个wp自带的搜索其实不好用,高亮关键词可以做到,但要说优化这个真得自己写sql查询

  4. Three (2011.03.29 at 20:18) 20楼

    呵呵。。不错。。。就是不大会弄。。。

评论分页: 1 2 3

发布评论

邮箱(必填)

换个背景