您现在的位置是：首页 > cms教程 > dedecms教程dedecms教程

dede织梦cms用Ajax实现搜索下拉提示功能代码实例

凌瑶2023-12-04 19:11:54dedecms教程已有14人查阅

导读这个功能主要实现的是用户在搜索的时候输入关键字，然后会出现下拉菜单，下拉菜单中出现的是站内所有包含这个关键字的文章的标题共用户选择

这个功能主要实现的是用户在搜索的时候输入关键字，然后会出现下拉菜单，下拉菜单中出现的是站内所有包含这个关键字的文章的标题共用户选择，相对DedeCMS原生的搜索这个功能实用一点，既增加了用户体验，也可以让用户快速的找到想要的东西。功能基于php+jquery来实现，参考autocomplete，效果图如下：
下面讲解下具体实现步骤：
1、打开你的网站首页模板，在</head>之前加入

<script language="javascript" type="text/javascript" src="https://img.genban.org{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>

这部分可以根据你自己的代码的实际情况具体修改，主要是输入关键字的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}