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

这个功能主要实现的是用户在搜索的时候输入关键字，然后会出现下拉菜单，下拉菜单中出现的是站内所有包含这个关键字的文章的标题共用户选择，相对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}

此样式可以根据自己的网站定义噢。
到这添加的代码就完了，然后下载search_list.rar,下载后解压得search_list.php到放入/plus目录下。在这个文件里有详细注解。可根据实际情况调整。所有结果都是由这个文件来返回的。之后去前台试试您的效果把。

本文标签：

声明：本文由代码号注册/游客用户【凌瑶】供稿发布，本站不对用户发布的dede织梦cms用Ajax实现搜索下拉提示功能代码实例信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：凌瑶» /dmh/11000.html

很赞哦！ ()