百度站內搜索”也比較成熟了，可以設置站內搜索還是全網搜索，還能獲得廣告費用，許多人就放棄DedeCMS原生的搜索功能。如果能實現和百度搜索一樣下拉菜單來對本站標題AJAX預加載，效率會高許多，DedeCMS搜索功能比較強大，不妨利用AJAX實現這個小功能。也算是對AJAX的一種應用。
百度搜索下拉菜單
在需要增加該功能的模板</head>之前增加js代碼
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript"> function lookup(inputString) { if(inputString.length == 0) { // Hide the suggestion box. $('#suggestions').hide(); } else { $.post("{dede:global.cfg_cmspath/}/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> |
在/plus/下增加search_list.php，代碼如下
為保證數據安全，數據庫調用以下橙色部分的還是規定范圍。
<?phpheader("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,typeid FROM dede_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, '<font color=/'red/'>'.$queryString.'</font>', $bb); //使查詢到的關鍵字為紅色，更改color后邊的顏色代碼，可以改變顏色。 $a=$result["typeid"]; $row=$dsql->GetOne("SELECT typedir,id FROM dede_arctype WHERE id=$a"); $aa=$row['typedir']; $aa=str_replace("{cmspath}",$cfg_basehost,$aa);//絕對路徑處理 $id=$result['id']; echo '<li><a target="_blank" href="'.$aa.'/'.$id.'.html">'.$bb.'</a></li>'; } }else{ }}else{echo '參數為空！!';}?> |
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}
上面的修改方法只適合utf-8版本的織夢，utf-8稱為萬國碼，兼容性更強，聽說一些手機還不兼容gbk，此教程適合織夢靜態URL。
