海洋CMS仿百度实现搜索自动完成

 2017-09-29 11:43   3634 人阅读  0 条评论

本文主要介绍海洋CMS实现搜索自动完成的功能的方法,由nohacks.cn原创,转载请注明出处!


实现原理 :

     
   用php构造海洋CMS的搜索Jsonp服务,  然后用jquery.js脚本前端呈现。

安装方法:

以非凡模块为例:

1. 修改附件js目录里的jquery.autocomplete.js里的网址为自己的网址


2. 把su.php和js文件夹上传到海洋CMS安装目录。



3. 修改模块源码

      3.1  修改加载文件

          打开模块html目录里的“head_include.html”,前面添加下面的代码:


   <link href=""/{seacms:sitepath}js/style.css" rel="stylesheet">
   <script src="/{seacms:sitepath}js/jquery.js"></script>
    <script src="/{seacms:sitepath}js/jquery.autocomplete.js"></script>



    如果后面有这样的代码,需要屏蔽掉或删掉,不然会冲突。

             <script src="/{seacms:sitepath}js/jquery-1.4.4.min.js"></script>

   3.2 修改头文件 head.html

       搜索部分修改为下面的代码:

    
<ul class="search clearfix">
   <td style="position: relative;">
                    
<form name="formsearch" id="formsearch" action='/{seacms:sitepath}search.php' 
method="post"  target="_self" autocomplete="off">
      <input class="input" name="searchword"  type="text" id="wd" 
placeholder="输入关键词" autocomplete="off"/>
         <input class="imgbt" type="submit"  id="submit"  value=""/>
                  <p></P><br><br>
                  <div id="word"></div>
      </form>
          </td>
          
          
    </ul>


更新记录:

2017.9.29 更新为V1.2

* 修复中文不能显示的BUG;

* php代码重新构建,提高安全性。




效果预览:http://mov.nohacks.cn
作者网站:http://nohacks.cn
源码大小: | 来源:本地下载
已经过安全软件检测无毒,请您放心下载。
 


 发表评论


表情

还没有留言,还不快点抢沙发?