この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

辞書っぽいっていうか、jQueryとかを使ってページ内でフォームに入力した文字列をハイライトする仕組みを作ります。
まあCtrl+Fとかやっても同じ事なんですが……。

こちらのサイト様で配布されているプラグイン「Mini Help System」を使用させて頂きました。


まずはhtml。
おまけでアルファベットとか数字とか五十音とかの表もメモしておきました。

<table>
<thead>
<tr>
<td colspan="3"><input type="text" placeholder="Search" id="search" /></td>
</tr>
<tr>
<td colspan="3"><a href="#aa">A</a><a href="#ab">B</a><a href="#ac">C</a><a href="#ad">D</a><a href="#ae">E</a><a href="#af">F</a><a href="#ag">G</a><a href="#ah">H</a><a href="#ai">I</a><a href="#aj">J</a><a href="#ak">K</a><a href="#al">L</a><a href="#am">M</a><a href="#an">N</a><a href="#ao">O</a><a href="#ap">P</a><a href="#aq">Q</a><a href="#ar">R</a><a href="#as">S</a><a href="#at">T</a><a href="#au">U</a><a href="#av">V</a><a href="#aw">W</a><a href="#ax">X</a><a href="#ay">Y</a><a href="#az">Z</a></td>
</tr>
<tr>
<td colspan="3"><a href="#1">1</a><a href="#2">2</a><a href="#3">3</a><a href="#4">4</a><a href="#5">5</a><a href="#6">6</a><a href="#7">7</a><a href="#8">8</a><a href="#9">9</a></td>
</tr>
<tr>
<td colspan="3"><a href="#a">あ</a><a href="#i">い</a><a href="#u">う</a><a href="#e">え</a><a href="#o">お</a><a href="#ka">か</a><a href="#ki">き</a><a href="#ku">く</a><a href="#ke">け</a><a href="#ko">こ</a><a href="#sa">さ</a><a href="#si">し</a><a href="#su">す</a><a href="#se">せ</a><a href="#so">そ</a><a href="#ta">た</a><a href="#ti">ち</a><a href="#tu">つ</a><a href="#te">て</a><a href="#to">と</a><a href="#na">な</a><a href="#ni">に</a><a href="#nu">ぬ</a><a href="#ne">ね</a><a href="#no">の</a><a href="#ha">は</a><a href="#hi">ひ</a><a href="#hu">ふ</a><a href="#he">へ</a><a href="#ho">ほ</a><a href="#ma">ま</a><a href="#mi">み</a><a href="#mu">む</a><a href="#me">め</a><a href="#mo">も</a><a href="#ya">や</a><a href="#yu">ゆ</a><a href="#yo">よ</a><a href="#ra">ら</a><a href="#ri">り</a><a href="#ru">る</a><a href="#re">れ</a><a href="#ro">ろ</a> <a href="#wa">わ</a><a href="#wo">を</a><a href="#nn">ん</a></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</thead>
<tbody id="content">
<tr>
<td class="initial" rowspan="3"><a href="javascript:void(0)" id="ao">O</a></td>
<th>ozawa</th>
<td>administrator</td>
</tr>
</tbody>
</table>

次にCSSとかJavaScriptとかの外部ファイルを適用します。

<script src="highlight.jquery.js"></script>
<script src="jquery.scrollTo.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">

最後にscript.jsを編集して完了です。編集する箇所は3行目と4行目です。
また、検索に該当した箇所のCSSは.matchで制御する事が出来ます。

var search = $('#search'),//入力欄
content = $('#content'),//検索エリア