DedeCMS用Ajax实现搜索实时匹配文章预览

        DedeCMS搜索增加Ajax实时预览功能修正版，实现用户在输入关键字搜索时，出现与该关键字的相关的所有文章的下拉列表，供用户选择，很大程度上提高了用户体验。这个功能在淘宝、京东之类的网站运用得较多，实现起来并不复杂。

        该版本只适合数据量不是很大的网站，以免出现假死或崩溃。

        把以下JS代码放在网站底部</body>前即可，建议放在公共footer.htm模板下。

<script language="javascript" type="text/javascript" src="js/jquery-1.7.1.min.js"></script><!--先引入JS库，请自行下载-->
<script type="text/javascript"> 
    function lookup(inputString) { 
        if(inputString.length == 0) { 
            // Hide the suggestion box. 
            $('#suggestions').hide(); 
        }else{ 
            $.post("/plus/search_list.php", {queryString: ""+inputString+""}, function(data){ 
                if(data.length >0) { 
                    $('#suggestions').show(); 
                    $('#autoSuggestionsList').html(data); 
                } 
            }); 
        } 
    } // lookup 
    function fill(thisValue) { 
        $('#inputString').val(thisValue); 
        setTimeout("$('#suggestions').hide();", 200); 
    } 
</script> 

       搜索功能 一般是在head.htm头部模板，注意以下标红的地方。

<form name="formsearch" action="{dede:global.cfg_cmsurl/}/plus/search.php" id="formkeyword"> 
    <input type="hidden" name="kwtype" value="0" /> 
    <input type="text" name="q" size="24" value="在这里搜索..." onfocus="if(this.value=='在这里搜索...'){this.value='';}" onblur="if(this.value==''){this.value='在这里搜索...';}" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" class="f-text"> 
    <input type="submit" class="commit" value="搜索" /> 
    <p class="suggestionsBox" id="suggestions" style="display: none;"> 
        <p class="suggestionList"><ul id="autoSuggestionsList"></ul></p> 
    </p> 
</form> 

        在/plus目录下新建search_list.php文件，代码如下，橙色部分请根据实际情况修改。复制代码是，请删除“分隔符”。

<?php
header("Content-Type: text/html;charset=utf-8");
require_once(dirname(__FILE__)."/../include/common.inc.php");
global $dsql;
if(isset($_POST['queryString'])) {
    $queryString = $_POST['queryString'];
    if(strlen($queryString) >0) {
        $dsql->SetQuery("SELECT id,title,click FROM #分隔符@__archives WHERE title LIKE '%$queryString%' and arcrank=0 order by click desc LIMIT 10");
        //数据库查询，本例调用10条。
        $dsql->Execute();
        while ($result = $dsql->GetArray()) {
            $bb=$result["title"];
            $bb=str_ireplace($queryString, '<b><font color=\'red\'>'.$queryString.'</font></b>', $bb);
            echo '<li><a target="_blank" href="/view-'.$result["id"].'.html">'.$bb.'</a></li>';
        }
    }else{
    } 
}else{
echo '参数为空！!';
}
?>

        注：本例只适合伪静态或动态，静态URL的修改方法《DedeCMS实现百度搜索下拉菜单提示信息功能》对橙色部分的URL处理可自行研究。原作者是点击标题后传到搜索栏，再回车或点击搜索按钮才能搜索，比较麻烦，修改为直接跳转到新窗口打开。

转载请注明来源网址：https://www.mubanyun.com/dedecms_jq/1323.html