織夢dedecms使用ajax實現搜索插入到前端頁面（回顯）附實例

織夢dedecms使用ajax實現搜索插入到前端頁面（回顯）。主要實現織夢dedecms ajax搜索提交表單查詢數據回顯至前端頁面。

下面講解下具體實現步驟：

1、打開你的網站首頁模板，在</head>之前加入

<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery-1.7.1.min.js"></script>
<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> 

注：jquery-1.7.1.min.js這個jquery庫需要你自己下載，這裏就不多說了。本人用的是這個版本的。

2、打開head.htm，找到搜索部分的from表單部分代碼修改爲

<form  name="formsearch" action="{dede:global.cfg_cmsurl/}/plus/search.php" id="formkeyword"> 
          <label for="header-subscribe-email" class="text"> </label> 
          <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="搜索" /> 
          <div class="suggestionsBox" id="suggestions" style="display: none;"> 
            <div class="suggestionList"><ul id="autoSuggestionsList"></ul></div> 
          </div> 
        </form> 

注：這部分可以根據你自己的代碼的實際情況具體修改，主要是輸入關鍵字的input和下邊加的DIV層。

3、打開你自己的樣式表css文件，在最後加入

.suggestionsBox { position:relative; left:0px;width: 250px; background: white;border: 1px solid #dcdcdc;color: #323232; z-index:999; } 
.suggestionList { margin: 0px; padding: 0px; } 
.suggestionList li { margin: 0px 0px 3px 0px; position:relative;padding: 3px; cursor: pointer;list-style:none;padding-left:5px;height:20px;overflow:hidden} 
.suggestionList li:hover { background-color: #659CD8; } 
.jr{position:absolute;top:9px;right:-5px} 

注：此樣式可以根據自己的網站定義噢。

 

4、php後端部分，這段代碼中的search_list.php就是本文下載的附件文件，下載後放入/plus目錄下。

　　

<?php
/*

*/
header("Content-Type: text/html;charset=utf-8");
//文件編碼，如果你是gb2312，哪就改成gbk
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");
		//數據庫查詢，這裏是關鍵，可調整表和字段，調整這裏可以條用全站數據，本功能不建議訪問量巨大的站使用，這裏可能會引起崩潰。
		$dsql->Execute();
		while ($result = $dsql->GetArray()) {
			$bb=$result["title"];
			//把查詢到的標題存入$bb
			$bb=str_ireplace($queryString, '<b><font color=\'red\'>'.$queryString.'</font></b>', $bb);
			//使查詢到的關鍵字爲紅色，更改color後邊的顏色代碼，可以改變顏色。
			echo '<li onClick="fill(\''.$result["title"].'\');">'.$bb.'<a class="jr" href="/sitejs-'.$result["id"].'-1.html"><img src="http://www.sitejs.com/templets/red/images/jr.gif"/></a></li>';
			//輸出結果,fill(\''.$result["title"].'\')這個裏邊的結果不能包含html代碼，否則不能選擇。href="/sitejs-'.$result["id"].'-1.html"這一段更改爲你自己的連接，這個是可以使直接點擊後邊的箭頭圖片進入這篇文章。這裏的圖片最好改成你自己網站的。本站全站防盜鏈，可能會出不來。
			//echo '<li onClick="fill(\''.$result["title"].'\');">'.$result["title"].'</li>';//如果不想變色。就把這句的註釋刪掉，把上邊那句echo刪掉。
		}
	} else {
	} 
} else {
	echo '參數爲空！!';
}

    到這添加的代碼就完了，然後下載search_list.rar,下載後解壓得search_list.php到放入/plus目錄下。在這個文件裏有詳細註解。可根據實際情況調整。所有結果都是由這個文件來返回的。最後去前臺試試您的效果吧。

整個實例附件下載：https://download.csdn.net/download/yw8886484/12284431