這個功能主要實現(xiàn)的是用戶在搜索的時候輸入關(guān)鍵字，然后會出現(xiàn)下拉菜單，下拉菜單中出現(xiàn)的是站內(nèi)所有包含這個關(guān)鍵字的文章的標(biāo)題共用戶選擇，相對DedeCMS原生的搜索這個功能實用一點，既增加了用戶體驗，也可以讓用戶快速的找到想要的東西。功能基于php+jquery來實現(xiàn)，參考autocomplete，效果圖如下：

　　下面講解下具體實現(xiàn)步驟：

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

<script language="javascript" type="text/javascript" src="http://pic.html5code.net{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庫需要你自己下載，這里就不多說了。本人用的是這個版本的。

　　這段代碼中的search_list.php就是本文下載的文件，下載后放入/plus目錄下。

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

<formname="formsearch"action="{dede:global.cfg_cmsurl/}/plus/search.php"id="formkeyword"><labelfor="header-subscribe-email"class="text"> </label><inputtype="hidden"name="kwtype"value="0"/><inputtype="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"><inputtype="submit"class="commit"value="搜索"/><divclass="suggestionsBox"id="suggestions"style="display: none;"><divclass="suggestionList"><ulid="autoSuggestionsList"></ul></div></div></form>

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

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

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

　　此樣式可以根據(jù)自己的網(wǎng)站定義噢。

　　到這添加的代碼就完了，然后下載search_list.rar,下載后解壓得search_list.php到放入/plus目錄下。在這個文件里有詳細注解。可根據(jù)實際情況調(diào)整。所有結(jié)果都是由這個文件來返回的。最后去前臺試試您的效果把。