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  定义执行搜索的按钮的样式 

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

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

    

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

         前台显示效果如图：

       以下是个部分的代码和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中定义以上三个部分的样式

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

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

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

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