織夢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