小李SEO博客

网站优化服务

织梦cms使用ajax实现搜索下拉提示功能

这个功能主要实现的是用户在搜索的时候输入关键字,然后会出现下拉菜单,下拉菜单中出现的是站内所有包含这个关键字的文章的标题共用户选择,相对DedeCMS原生的搜索这个功能实用一点,既增加了用户体验,也可以让用户快速的找到想要的东西。

功能基于php+jquery来实现,参考autocomplete,打开你的网站首页模板,在</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这个jquery库需要你自己下载,这里就不多说了。

本人用的是这个版本的。这段代码中的search_list.php就是本文下载的文件,下载后放入/plus目录下。打开head.htm,找到搜索部分的from表单代码修改为<form name="formsearch" action="{dede:global.cfg_cmsurl/}/plus/search.php" id="formkeyword"><label for="header-subscribe-email" class="text"></label><input type="hidden" name="kwtype" value="0"/><input type="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"><input type="submit" class="commit" value="搜索"/><div class="suggestionsBox" id="suggestions" style="display: none;"><div class="suggestionList"><ul id="autoSuggestionsList"></ul></div></div></form>

这部分可以根据你自己的代码的实际情况具体修改,主要是输入关键字的input和下边加的DIV层。打开你自己的样式表css文件,在最后加入.suggestionsBox {position: relative;left: 0px;width: 250px;background: white;border: 1px solid #dcdcdc;color: #323232;z-index: 999;}.suggestionList {margin: 0px;padding: 0px;}.suggestionList li {margin: 0px 0px 3px 0px;position: relative;padding: 3px;cursor: pointer;list-style: none;padding-left: 5px;height: 20px;overflow: hidden}.suggestionList li:hover {background-color: #659CD8;}.jr {position: absolute;top: 9px;right: -5px}到这添加的代码就完了,然后下载search_list.rar,下载后解压得search_list.php到放入/plus目录下。在这个文件里有详细注解。可根据实际情况调整。所有结果都是由这个文件来返回的。最后去前台试试您的效果把。

上一篇:dedecms图集productimagelist标签调用和常见问题汇总 下一篇:织梦cms网站修改模板路径拒绝模板泄漏被盗
织梦cms相关文章阅读
  • 织梦cms提示模板文件不存在无法解析文档解决方法

    小李网络公司介绍织梦cms提示模板文件不存在无法解析文档解决方法知识,包括织梦网站免费模板为什么页面模板不存在dedecms模板站模板不存在无法解析文档hbulic模板不存在是什么问题免费织梦...

  • 织梦cms会员中心调用会员最后登录时间和上次登录ip

    小李网络公司介绍织梦cms会员中心调用会员登录时间ip知识,包括dedecms织梦会员中心调用会员最后登录时间和IP的方法_织梦58,织梦常用调用标签织梦调用代码织梦相关文章调用进入会员中心dede...

  • 织梦cms实现调用随机数代码教程

    小李网络公司介绍织梦cms实现调用随机数代码教程知识,包括织梦常用调用标签织梦首页调用文章列表织梦栏目内容调用织梦内容也调用织梦相关文章调用织梦cms建站教程dedecms织梦系统织梦首页...

  • 织梦cms留言板只允许管理员查看留言内容

    小李网络公司介绍织梦cms留言板只允许管理员查看留言内容知识,包括 dedecms如何设置可以只让管理员查看留言本内容呢_织梦园, dedecms教程:留言只有管理员才能看到的实现方法....

  • 织梦cms关键词替换问题完美解决方案

    小李网络公司介绍织梦cms关键词替换问题完美解决方案知识,包括word替换多个关键词p2463故障码完美解决方案关键词替换word查找多个关键词g4900装win7完美解决方案床车用电完美解决方案批量不同...

  • 织梦cms企业会员推荐调用方法

    小李网络公司介绍织梦cms企业会员推荐调用方法知识,包括java怎么调用另一个类的方法java怎么调用类方法java方法调用过程java通过类名调用方法java静态方法的调用java直接调用方法调用类的方法...

  • 织梦cms动态跳转修改为静态url地址

    小李网络公司介绍织梦cms动态跳转修改为静态url地址知识,包括dede改变首页跳转dede的标签dede cms url漏洞dede筛选urldede专题页urldedeurl参数dede怎么优化urldede标签urldede栏目页面dede默认首页出错....

  • 织梦cms去版权信息SQL命令删除

    小李网络公司介绍织梦cms去版权信息SQL命令删除知识,包括查版权版权怎么申请PS如何删除图片版权信息qq音乐版权限制侵权删除彻底删除discuz版权织梦哪个版本可以删除版权网站版权信息规定要...

  • 织梦cms后台Fatal error模板管理出错解决方法

    小李网络公司介绍织梦cms后台Fatal error模板管理出错解决方法知识,包括DEDECMS后台:Fatal error:Call to a member function read(),member中文function中文error函数的使用方法function的使用function asfunction什么意思啊...

  • 织梦cms修改Mysql数据库端口号教程

    小李网络公司介绍织梦cms修改Mysql数据库端口号教程知识,包括sql数据库端口号怎么查数据库端口号怎么查数据库端口号是多少连接数据库的端口号是干啥的数据库的默认端口号dedecms数据库读取...

  • 织梦cms出现\dedesql.class.php的解决方法

    小李网络公司介绍织梦cms出现\dedesql.class.php的解决方法知识,包括帝国cms和织梦哪个好dede仿站网仿织梦dede58源码dede整站更新dede主页dedecmsdedefielddede整站模板dede标记教程织梦dede建站教程视频....

  • 织梦cms5.6和5.7版本缩略图缩放变形问题解决方法

    小李网络公司介绍织梦cms5.6和5.7版本缩略图缩放变形问题解决方法知识,包括dedecms上传缩略图dedecms增加缩略图之梦总是变回默认缩略图dede设置缩略图织梦栏目添加缩略图dede自定义缩略图织梦...

SEO公司排名
 
QQ在线咨询
SEM竞价推广
137-1296-7640
SEO优化外包
137-1296-7640