小李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网站dede:channelartlist调用导航无法显示解决方法

    小李网络公司介绍织梦cms网站调用导航无法显示知识.包括dede:channelartlist调用导航时外部链接导航无法显示的解决方法,dede什么意思channel 4channel9dede怎么仿站dede使用dede....

  • 织梦cms打开网站后台系统首页卡解决方法

    小李网络公司介绍织梦cms网站首页打开卡知识,包括DEDECMS打开网站后台系统首页卡解决方法-织梦二次开发,dedecms教程:后台首页很卡的解决方法-dedecms教程-跟版网....

  • 织梦cms系统常用问题处理方法收集

    小李网络公司介绍织梦cms系统常用问题处理方法知识,包括dedecms织梦系统常用问题处理方法收集_织梦58,织梦cms建站教程目前常用的垃圾处理方法有哪些织梦 建站dedecms织梦系统减少垃圾常用的方...

  • 织梦cms5.7版本去除版权删除方法

    小李网络公司介绍织梦cms5.7版本去除版权删除方法知识,包括dede删除新加变量织梦程序去版权去dedecms版权信息去除dedecms底部dedecms去水印dedecms版权去掉dedecms去除版本去bydedecms....

  • 织梦cms根据上传图片格式输出不同参数显示教程

    小李网络公司介绍织梦cms根据上传图片格式输出不同参数显示教程知识,包括如何上传jpg格式的图片视频输出什么格式最好上传jpg格式文件图片的方法照片上传显示不是jpg格式edius输出什么格式最...

  • 织梦cms标签channel属性currentstyle不好用解决方法

    小李网络公司介绍织梦cms标签channel属性currentstyle不好用知识,包括currentstyle什么意思currentstyle怎么用html中style所有属性current什么意思啊html5中style属性currentStylethisclasshtml标签style属性举例....

  • 织梦cms随机调用文章数据方法总结

    小李网络公司介绍织梦cms随机调用文章数据方法总结知识,包括织梦相关文章调用织梦常用调用标签织梦调用代码dedecms调用网站dedecms代码调用织梦数据库在哪dedecms调用dedecms数据库信息....

  • 织梦cms问答模块伪静态出现404解决方法

    小李网络公司介绍织梦cms问答模块伪静态出现404知识.包括dede问答模块伪静态后出现404的解决方法-美文阅读网,nginx实现伪静态织梦伪静态插件PHP伪静态nginx 伪静态PHP做伪静态dede静态修改dede全站...

  • 织梦cms5.6/5.7缩略图缩放变形解决方法

    小李网络公司介绍织梦cms5.6/5.7缩略图缩放变形解决方法知识,包括dedecms增加缩略图dede设置缩略图织梦栏目添加缩略图dede自定义缩略图织梦cms上传不了缩略图dedecms列表缩略图dedecms缩略图尺寸....

  • 织梦cms首页调用新加入会员列表

    小李网络公司介绍织梦cms首页调用新加入会员列表知识,包括dedecms在主页调用会员信息列表 - happysha - 博客园,dedecms在首页调用会员信息(会员头像和名字等)_织梦58,求助dedecms会员模型新增字段如...

  • 织梦cms提示数据校验不对错误解决方法

    小李网络公司介绍织梦cms提示数据校验不对错误解决方法知识,包括三种数据校验方法出现校验和错误几种常用的数据校验方式出现校验和错误该文件已损坏打包数据校验和错误分卷已损坏....

  • 织梦cms网站首页调用文章评论条数方法

    小李网络公司介绍织梦cms首页调用文章评论条数知识.包括dedecms如何利用标签调用当前文章评论数量的方法,Dedecms首页调用文章页面评论数量_dedecms织梦教程.织梦dedecms首页调用文章评论条数....

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