このページがあるディレクトリのindex.htmlには、「ページ内インクリメンタル検索」が付いていて、キーワードを入力すると、そのキーワードを含む項目のみを表示し、それ以外を隠します。それなり便利な機能なのですが、どの位置にあったものかまでは分かりません。このページ制作担当者として、index.htmlの項目内容を修正、更新する際には、その表示位置が必要なため、全てを表示したまま、キーワードをハイライトさせる「文字列ライブ検索」のこのページを作りました。
この検索機能をindex.htmlに設置しても良かったのですが、jQueryの他のプラグインとのコンフリクト、項目数が450を越え動作が重い、ことなどを勘案して別ページにしました。
項目数が多いため、「分類:Javascript、jQuery関連」の上と下の2つに分けて、矢印の付いたボタンから、それぞれ下側に読込みます。検索キーワードをを入力すると、その文字列を黄色い背景色でハイライト表示します。なお、使用しているjQueryプラグインは、「jQueryプラグインhighlight.jsを使って、文字列をライブ検索してハイライト」ページと同じものです。
補足事項(キーワードについて)
- 同じキーワードのまま、違うパートを読込み直した場合、一度入力欄をフォーカスし、enter(return)キーを押してください。
- キーワードに該当する項目の有無は、indexページの「ページ内インクリメント検索」のほうが分かりやすいです。
- 欧文の大文字、小文字は区別しません。ひらがな、カタカナの小書き文字(小文字)は区別します。
文字列ライブ検索
ライブ検索キーワード:
ここにindex.htmlの対象部分を読込み