龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

站内高亮搜索与关键字高亮php/javascript代码

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
php 代码 代码如下 ?php class search extends SCURD{ /*构造函数,初始化连接,与父类使用方法相同*/ function __construct($HOST,$DB_USER,$PASSWD,$DB){ parent::__construct($HOST,$DB_USER,$PASSWD,$DB); } /*析构函数,关

php 代码

 代码如下

<?php
class search extends SCURD{
    /*构造函数,初始化连接,与父类使用方法相同*/
    function __construct($HOST,$DB_USER,$PASSWD,$DB){
        parent::__construct($HOST,$DB_USER,$PASSWD,$DB);
    }
    /*析构函数,关闭连接*/
    function __destruct(){
        parent::__destruct();
    }
    /**
    * 公有方法,搜索字符串并高亮文字,返回一个二维数组结果集
    * @parameter $table(字符串类型,必填),填写所需查询的表
    * @parameter $fieldName(字符串类型,必填),填写所需搜索的字段名
    * @parameter $strSearch(字符串类型,必填),填写所需搜索的字符串
    * @parameter $hlColor(字符串类型,可选),填写高亮文字的颜色,默认为红色
    **/
    function iSearch($table,$fieldName,$strSearch,$hlColor = 'red'){
        $arrSearch = explode(' ',$strSearch);
        foreach($arrSearch as $value){
            $conditions[] = "$fieldName LIKE '%$value%'";
        }
        $condition = is_array($conditions) ? implode(' OR ',$conditions) : $conditons[0];
        $arrStr = parent::r($table,array('*'),$condition);
        if($arrStr){
            for($i = 0; $i < count($arrStr); $i++){
                foreach($arrSearch as $key => $sValue){
                    $arrStr[$i][$fieldName] = $this->hlStr($arrSearch[$key],$arrStr[$i][$fieldName],$hlColor);
                }
            }
        }
        return $arrStr;
    }
    /**
    * 私有方法,高亮文字,返回高亮后的字符串
    * @parameter $needle(字符串类型,必填),填写所需查找的字符串
    * @parameter $haystack(字符串类型,必填),填写被查找的字符串
    * @parameter $color(字符串类型,必填),填写高亮文字的颜色
    **/
    private function hlStr($needle,$haystack,$color){
        $str = str_ireplace("$needle","<font style='color:$color;'>$needle</font>",$haystack);
        return $str;
    }
}
 
//使用示例
if(isset($_GET['txtSearch'])){  //判断是否提交了表单
    $str = $_GET['txtSearch'];  //搜索的字符串赋值给$str
    $s = new search('localhost','root','','test');  //实例化一个search类
    $results = $s->iSearch('test','message',$str);   //把结果集赋值给$results
    if($results){   //判断结果集是否为空
        foreach($results as $key => $value){ //遍历结果集
            echo '第' . ($key+1) . '条记录:<br>';
            echo 'ID:' . $value['id'] . ' ' . '姓名:' . $value['name'];
            echo '<br>留言:<br>' . $value['message'] . '<p>';
        }
    }
    else{
        echo '无记录';
    }
}
?>
<!--写一个表单提交到本页-->
<form action="" method="get">
    <input name="txtSearch" type="text" />
    <input name="btnSearch" type="submit" value="搜索" />
</form>

对于动态页

面一般我们会对关键字进行预处理,让其高亮显示,那么静态页面如何实现高亮的显示呢?这里我们依靠javascript简单的实现了这一功能

 代码如下

<style type="text/css">
.highlight {
background-color: #ffff00;
color: red;
}
</style>

实现参数获取

和高亮的重要函数

 代码如下

<script language="JavaScript" type="text/javascript">
<!--
function getHtmlPara(p)
{
var url=location.search.substring(1);
var tempStr=p+"=";
if (url.indexOf(tempStr)==-1) return null;
if (url.indexOf("&")!=-1)
{
  var a=url.split("&");
  var i=0;
  for (i=0;i<a.length;i++)
  {
   if (a.indexOf(tempStr)!=-1) return a.substring(tempStr.length);
  }
}
else
{
  return url.substring(tempStr.length);
}
}
function htmlHighLight(obj)
{
var rea = getHtmlPara('highlight');
if (rea!=null && rea!='')
{
  var arrayofrea = rea.split("+");
  var el = document.getElementById(obj);
  var thisstr = el.innerHTML;
  var bb = '<span class="highlight">$1</span>';
  for (var i=0; i<arrayofrea.length; i++)
  {
   if (arrayofrea!=null && arrayofrea!='')
   {
    re = new RegExp("("+arrayofrea+")", "gi");
    thisstr = thisstr.replace(re, bb);
   }
  }
  el.innerHTML = thisstr;
}
}
//-->
</script>

调用方法: 当静态页面传送一个highlight参数过来时就会将对应的ID区域关键字高亮。 页面地址如:http://www.xx.com/test.html?highlight=关键字


精彩图集

赞助商链接