POST TIME:2019-09-30 15:31
這個(gè)功能主要實(shí)現(xiàn)的是用戶在搜索的時(shí)候輸入關(guān)鍵字，然后會(huì)出現(xiàn)下拉菜單，下拉菜單中出現(xiàn)的是站內(nèi)所有包含這個(gè)關(guān)鍵字的文章的標(biāo)題共用戶選擇，相對(duì)DedeCMS原生的搜索這個(gè)功能實(shí)用一點(diǎn)，既增加了用戶體驗(yàn)，也可以讓用戶快速的找到想要的東西。功能基于php+jquery來(lái)實(shí)現(xiàn)，參考autocomplete，效果圖如下：
下面講解下具體實(shí)現(xiàn)步驟：
1、打開(kāi)你的網(wǎng)站首頁(yè)模板，在</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這個(gè)jquery庫(kù)需要你自己下載，這里就不多說(shuō)了。本人用的是這個(gè)版本的。
這段代碼中的search_list.php就是本文下載的文件，下載后放入/plus目錄下。
2、打開(kāi)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ù)你自己的代碼的實(shí)際情況具體修改，主要是輸入關(guān)鍵字的input和下邊加的DIV層。
3、打開(kāi)你自己的樣式表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目錄下。在這個(gè)文件里有詳細(xì)注解。可根據(jù)實(shí)際情況調(diào)整。所有結(jié)果都是由這個(gè)文件來(lái)返回的。最后去前臺(tái)試試您的效果把。
| ? |
|
|
|
|||||||||||||||
| 全國(guó)咨詢熱線 | |||||||||||||||||
| 400-1100-266 | |||||||||||||||||
| 在線客服( QQ：340506921 ) | |||||||||||||||||
 |
|||||||||||||||||
