DedeCMS使用Ajax實現搜索下拉提示功能,DEDE技術
導讀:DEDE技術DEDE技術這個功能主要實現的是用戶在搜索的時候輸入關鍵字,然后會出現下拉菜單,下拉菜單中出現的是站內所有包含這個關鍵字的文章的標題共用戶選擇,相對 DedeCMS 原生的dede模板安裝免費織夢模板。
這個功能主要實現的是用戶在搜索的時候輸入關鍵字,然后會出現下拉菜單,下拉菜單中出現的是站內所有包含這個關鍵字的文章的標題共用戶選擇,相對DedeCMS原生的搜索這個功能實用一點,既增加了用戶體驗,也可以讓用戶快速的找到想要的東西。功能基于php+jquery來實現,參考autocomplete,效果圖如下:
下面講解下具體實現步驟:
1、打開你的網站首頁模板,在</head>之前加入
<script language="javascript" type="text/javascript" src="https://img.genban.org{dede:global.cfg_temp織夢模板修改lets_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(); &ndede免費模板bsp; $('#autoSuggestionsList').html(data); } }); } } // lookup function fill(thisValue) { $('#inputString').val(thisValue); &nb織夢模板sp; setTimeout("$('#suggestions').hide();", 200); } </script>jquery-1.7.1.min.js這個jquery庫需要你自己下載,這里就不多說了。本人用的是這個版本的。
這段代碼中的search_list.php就是本文下載的文件,下載后放入/plus目錄下。
聲明: 本文由我的SEOUC技術文章主頁發布于:2023-07-21 ,文章DedeCMS使用Ajax實現搜索下拉提示功能,DEDE技術主要講述提示,標簽,CMS網站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_33260.html