您当前的位置: 主页 > 优化教程
织梦使用ajax无刷新实现站内织梦搜索具体实现步骤:
1、打开你的首页网站模板,在</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目录下。
 
2、打开head.htm,找到搜索部分的from表单代码修改为

<form  name="formsearch" action="{dede:global.cfg_cmsurl/}/plus/search.php" id="formkeyword">
 
          <label for="header-subscribe-email"> </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();">
 
          <input type="submit" value="搜索" />
 
          <div id="suggestions" >
 
            <div><ul id="autoSuggestionsList"></ul></div>
 
          </div>
 
        </form>
这部分可以根据你自己的代码的实际情况具体修改,主要是输入关键字的input和下边加的DIV层。
 
3、打开你自己的样式表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,织梦,模板,使用,ajax,无,刷新,实现,    标签:
    更多资讯请收藏关注 网站模板(www.1yc.cn)

dedecms二次开发时使用{dede:arclist},{dede:list}获取附件字段以前用织梦DEDECMS做二次开发时获取附加表字段内容都是通过runp... 2021-07-30
织梦获取当前页面的顶级栏目名称及链接教程织梦获取当前页面的顶级栏目名称及链接方法:在织梦文件目录中打开 \in... 2021-07-22
织梦dedecmsv5.x自动登录的实现方法本节内容: 织梦dedev5.x自动登录 实现步骤: 1,取消DEDE... 2021-07-27
针对织梦程序列表字段内可有可无的显示方法这个方法就和Dedecms的文章列表没有缩略图的不显示图片,如果有缩略... 2021-07-30
Pbootcms“提交成功”的提示语修改地址在哪里?Pbootcms留言“提交成功”的提示语修改 2023-08-04
dedeCMS 织梦的日期时间格式大全(最新)在我们做文章的时候常用一些函数修改来实现自己的页面效果,例如,时间的自... 2021-07-27
织梦后台转入成功登录信息的删除方法处女座站长朋友们,有一个很不好的习惯,不喜欢在php空间安装了dede... 2021-08-14
织梦dedecms游客投稿,游客投稿自动审核并生成HTML的方法dede游客投稿设置方法如下:核心 --- 频道模型 --- 普通文章... 2021-07-27
织梦dede 模板路径templets目录都有什么?/templets 织梦模板 存放目录 /templets/defau... 2021-07-22
dedecms子栏目中调用其顶级栏目名称和简介的方法本文实例讲述了dedecms子栏目中调用其所属顶级栏目的名称和简介的方... 2021-07-27
dede5.7 网址后面去 index.html找到更目录里面的 index.php 吧下面内容 复制进去 覆盖原来的... 2021-07-27
DEDECMS如何实现“文章标题-栏目名称-网站名”的相关设置织梦文章内容页title中实现文章标题-栏目名称-网站名的设置方法有三... 2021-07-30
织梦模板调用自定义字段方法使用织梦程序建站,很多时候需要添加一个字段来满足需求,比如添加一个价格... 2021-07-22
织梦dedecms安装提示dir如何解决织梦dedecms在安装的时候提示dir,那么出现dir提示是怎么回事... 2021-07-22
织梦data目录下的sessions文件夹有什么作用DedeCms中data目录下有个sessions目录,那这个目录是干... 2021-07-30
dedecms织梦模板去掉文档内链自动连接关键词的下划线方法一: 织梦有一个功能,可以实现文章内出现的关键词自动加链接,但是有... 2021-07-22
Dedecms教程:更新的文章禁止标题一致网站文章的更新最重要的一点就是原创性了。很多时候dedecms(织梦)... 2021-07-30

线
咨询热线:
135-0038-3336
在线客服:
点击这里给我发消息
微信交流:
公司官网: www.1yc.cn