亚洲优女在线,97久久夜色精品国产,99亚洲乱人伦aⅴ精品

主頁 > 網站建設 > 建站知識 > DedeCMS使用Ajax實現搜索下拉提示功能

DedeCMS使用Ajax實現搜索下拉提示功能

POST TIME:2019-09-30 15:31

工業環保工程類企業網站織夢模板(帶手機端)

軟件APP類網站源碼織夢通用型企業網站源碼html

html5響應式網站織夢模板源碼IT網絡工作室織夢網

藍色安防器材公司類整站模板

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

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

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

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>

　　這部分可以根據你自己的代碼的實際情況具體修改，主要是輸入關鍵字的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}

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

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