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>

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

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

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