Kesion CMS站内搜索功能

虽然将KesionCMS站内搜索功能成功移植到了自己站点里，但对于它的实现原理、代码、标签并不太懂，所以这次移植成功花了很多时间和精力修改代码，记录下来方便以后使用。

一、每个页面都有的通用搜索框（从 http://bbs.kesion.com/forumthread-654736.html 移植过来的）

前台效果如图：

包括三个部分：背景图片、搜索关键字输入框、搜索按钮。鼠标点击搜索框，会清除“输入关键字”这几个字，点其他地方又会显示出来。

1. 将解压Kesion.Label.SearchCls.rar后得到“Kesion.Label.SearchCls.asp”文件替换科讯“KS_Cls”目录下同名文件。

文件在附件中下载：Kesion.Label.SearchCls.rar

2. 在放置搜索框的位置调用如下代码

<div id="soso">{$GetSearch}</div>

3. 在css中定义如下三个样式

#soso 定义整个搜索框样式

搜索背景图（路径自行更改）：

#soso .textbox 定义搜索关键词输入框的样式

#soso .inputButton 定义执行搜索的按钮的样式

<style type="text/css">
#soso {  
       url( /glpi.kindit/images/soso.png) no-repeat;  
                 width:300px;  
                 height:76px; 
                 position:relative; 
                 float:left; 
                 border:none; 
                 margin:10px auto 10px 7px; 
} 
#soso .textbox {  
                display:block;  
                width:200px;  
                height:20px;  
                line-height:20px;  
                background:1px red solid;  
                text-indent:5px;  
                margin-top:41px; 
                margin-left:19px; 
                border:none;  
} 
#soso .inputButton {  
                   display:block;  
                   width:46px;  
                   height:28px;  
                   background:none;  
                   text-indent:-999em;  
                   cursor:pointer; 
                   position:absolute; 
                   left:232px; 
                   top:39px; 
                   border:none;  
} 
</style>

到此，每个页面的通用搜索框完成

二、站内搜索和结果显示模板（需在设置——基本信息设置——模板绑定——全站搜索模板中绑定该模板），

前台显示效果如图：

以下是个部分的代码和css样式，由KesionCMS自带的“全站搜索模板”的代码修改而来，调用到“站内搜索模板”中相应的位置即可

1. 快速搜索框部分

       <!--快速搜索开始-->  
<div style="text-align:center;height:30px;text-valign:middle;font-size:15px;"> 
<form name="searchbform" action="../../plus/search/" method="get" style="margin-top:8px;"> 
<div class="clear"></div> 
<div> 
<b>快速搜索:</b> 
<input name="key" id="key" size="52" class="i" value="{@search.keyword}" maxlength="100">  
<select name="stype" id="stype">  
  <option value="1">标题</option> 
  <option value="2">内容</option> 
  <option value="3">录入</option> 
</select>  
<input type=hidden name="m" id="m" value="{@search.channelid}"> 
<input style="padding:3px" type="submit" value=" 搜 索 "> 
</div> 
</form> 
</div> 
        <!--快速搜索结束-->

2. 搜索结果统计部分

<div class="clear"></div> 
<div class="searchbg"> 
   <div class="search">
     搜索"<span style="color:#FF0000">{@search.keyword}</span>",
     本次共找到相关网页约<span style="color:#FF0000">{@search.totalput}</span>条,
     用时<span style="color:#FF0000">{@search.leavetime}</span>秒
   </div> 
</div>

3.搜索结果内容部分

<div class="clear"></div> 
 <!--搜索页内容开始--> 
<div class="search_left"> 
     <div class="articlesearch"> 
        <div class="search_lstitle">搜索结果</div> 
         {@loop.begin} 
            <ul class="articlesearch_ul"> 
               <li class="articlesearch_li">
               <span class="art_title"><a href="{@item.linkurl}" target="_blank">{@item.title} </a></span> 
               <span class="class_name">[<a href="{@item.classurl}" target="_blank">{@item.classname}</a>]</span><br /> 
               <span class="artintro">{@item.intro}...</span> <br /> 
               <span class="arturl"><a href="{@item.linkurl}" target="_blank">{@item.linkurl}</a></span> 
               <span class="c9">{@item.adddate}</span><br /> 
               </li> 
            </ul> 
        {@loop.end} 
       <div style="clear:both"></div> 
         {@search.showpage} 
       <div style="clear:both"></div>             
    </div>   
     
    <div style="padding-left:10px;height:50px;" class="relatesearch"> 
      <table width="100%" border="0"> 
        <tr> 
          <td width="80" class="xgs">相关搜索:</td> 
          <td align="left"> 
            {@search.relative} 
          </td> 
        </tr> 
      </table>  
    </div> 
           
 </div> 
 <!--搜索页内容结束-->

4. 在css中定义以上三个部分的样式

<style type="text/css">
.clear { 
        clear:both; 
        height:0px;  
        overflow:hidden; 
} 
.searchbg{ 
          width:630px; 
          margin:0px auto; 
          url( /images/searchbg.gif) no-repeat; 
          height:40px; 
} 
.search{ 
        width:630px; 
        float:left; 
        padding-left:50px; 
        line-height:40px; 
} 
.search_left{ 
             width:100%; 
             float:left;  
             marin:auto; 
} 
.search_lstitle{ 
                url( /images/icon_01.gif) no-repeat 0px 8px;  
                padding-left:20px; 
                font-size:14px; 
                color:#000;  
                height:30px; 
                line-height:30px; 
                border-bottom:#dcdcdc 1px solid;  
                font-weight:bold; 
} 
.articlesearch{ 
               padding:10px;  
               padding-top:0px;  
} 
.articlesearch_ul{ 
                  width:620px; 
} 
.articlesearch_li{ 
                  width:620px; 
                  border-bottom:1px dashed #dcdcdc;  
                  margin-bottom:10px; 
                  margin-top:10px; 
                  overflow:hidden; 
} 
.class_name{ 
            font-size:14px; 
            color:#003366 
} 
.class_name a{ 
              font-size:14px; 
              color:#003366; 
} 
.art_title{ 
           font-size:14px; 
           color:#003366; 
} 
.artintro{ 
          line-height:24px; 
          color:#555;  
          letter-spacing:1px;  
          font-size:14px; 
} 
.arturl a{ 
          color:green;font-size:14px; 
} 
.c9 {  
     color:#999999; 
} 
.art_title a { 
              color:blue; 
              font-size:14px; 
} 
.xgs { 
      font-weight:bold; 
      font-size:14px;  
      color:#006699; 
} 
</style>

到此，站内搜索模板就完成了，在：设置——基本信息设置——模板绑定——全站搜索模板中绑定该模板即可

以上两个部分完成后，及实现了站内搜索的功能，无论是在通用的搜索框还是在站内搜索模板定义的页面中，输入关键字，开始搜索后，搜索结果都会在站内搜索模板的页面的显示！

另外，这个站内搜索功能在使用了一天后，发现了一个很严重的问题，即搜索范围不包括自定义表单写入的内容！