站內高亮搜尋與關鍵字高亮php/javascript代碼

來源:互聯網
上載者:User

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=關鍵字

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.