これはCtrl+Fのように機能するカスタム検索機能のデモですが、モバイルデバイス向けに最適化されています。右上の🔍ボタンをクリックして検索を開始してください。
このカスタム検索機能は、iPhone、iPad、Androidデバイスを含むすべてのモバイルデバイスで動作するように設計されています。適切なサイズのボタンとレスポンシブなレイアウトを備えたタッチフレンドリーなインターフェースを提供します。
ブラウザの組み込み検索機能とは異なり、このカスタム実装では、すべての一致項目が黄色でハイライトされ、現在の一致項目がオレンジ色でハイライトされる視認性が向上しています。また、一致項目に自動的にスクロールし、結果の数を表示します。
検索機能は、このページのどこにでも一致するものを見つけます。例えば、「の」や「を」などの一般的な言葉を検索して複数の一致を確認したり、特定のセクションにのみ表示される特定の用語を試したりできます。
モバイルデバイス向けの検索機能を実装する際には、タッチターゲット、画面のスペース、キーボードの動作を考慮することが重要です。この例では、以下の方法でこれらの考慮事項に対応しています：
この検索機能は標準的なウェブ技術を使用しています：
この実装は外部ライブラリへの依存を避け、軽量で高速です。元のHTML構造を保持しながらテキストをハイライトするためにDOM操作を使用しています。
機能をテストするために、これらの用語を検索してみてください：
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
私は、その男の写真を三葉、見たことがある。一葉は、その男の、幼年時代、とでも言うべきであろうか、十歳前後かと推定される頃の写真であって、その子供が大勢の女のひとに取りかこまれ、（それは、その子供の姉たち、妹たち、それから、従姉妹たちかと想像される）庭園の池のほとりに、荒い縞の袴をはいて立ち、首を三十度ほど左に傾け、醜く笑っている写真である。醜く？けれども、鈍い人たち（つまり、美醜などに関心を持たぬ人たち）は、面白くも何とも無いような顔をして、「可愛い坊ちゃんだね」といい加減なことをいう。しかし、いくら年が往っても、子供の美醜というものは、はっきり別れていると思う。