女神猫女王

代理加盟 2020全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 織夢大學 > 使用教程 >

DedeCMS用Ajax實現搜索實時匹配文章預覽

來源:本站原創 發布時間:2019-03-30 00:00:00熱度:我要評論(0

免費下載,無需注冊無需充值

        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處理可自行研究。原作者是點擊標題后傳到搜索欄,再回車或點擊搜索按鈕才能搜索,比較麻煩,修改為直接跳轉到新窗口打開。

轉載請注明來源網址:http://www.qksux.club/dedecms_jq/1323.html

    發表評論

    評論列表(條)

      女神猫女王 304243480561291978975318149860806727267596647516569228359307334427704429969116630382213662388653734237 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();