検索結果をハイライト表示したい、なんてね。

簡単な検索機能の結果をハイライト表示したい。

そう、切に思った。梅雨時の午後。

やってみよう。

１.ハイライト用のプラグインをぶち込む。（jQuery入っていない場合はjQueryもぶち込んで。）

jquery-highlight-5　というプラグインを使うよ。

highlight.html

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-highlight-5s.js"></script>

2.CSSを準備
ハイライトされた時の見た目をCSSで書いておく。

highlight.css

.highlight{
  background-color:yellow #色は自由にお決めになって。
}

3.ハイライト！！

例えば、検索結果(class:result)の中から、検索したワード(keyword)をハイライトしたい時

highlight.html

#検索した文字列を取得
keyword = $(".keyword").val();

$(function{
  $(#result).highlight(keyword);
});

おまけ
ハイライトを除去！

highlight.html

$(function{
  $(#result).removeHighlight();
});

---

本家サイトはこちら
highlight-5s