这个是利用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方法我不会。。。
已知问题,分页还不知道怎么弄比较好。另外,还仿制了高亮关键词,看看效果。
不过最好做成google或是baidu搜索框的效果。我觉得那样更好一点。
嗯...这主题蛮吃CPU的...
@EIIE
是。。。主要是背景
请教一个问题,如何去优化搜索结果?这个我查了很多东西,还是没有一个好的方法。
@无冷 ,优化?这个wp自带的搜索其实不好用,高亮关键词可以做到,但要说优化这个真得自己写sql查询
呵呵。。不错。。。就是不大会弄。。。