Algoliaのようなハンディ検索機能を使ったページ遷移を実現してみた～tailwindcssライブラリを添えて～
こんにちわ。nap5です。
Algoliaのようなハンディ検索機能を使ったページ遷移を実現してみたので、紹介したいと思います。
矢印キーでぐるっと一周まわって移動できたり、Enterキー押下でページ遷移できるあれですね。Twitterの検索バーが有名かもしれません。最近だとtailwindcssの公式ドキュメントにあるAlgoliaのような検索モーダルに見られますかね。
この実装は結構難しかったのですが、なんとかそれっぽくはなりました。実はTwitterでもそうなんですが、ホバー時のアクティブメニューのインデックスと矢印キーで移動したときのアクティブメニューのインデックスをいい感じにハンドリングするのが難しく、マウスホバーの置き所によってはダブって背景色が表示されてしまいます。なんとかしようと試みたんですが、結構しんどかった印象でした。
そこんところを目を瞑れば、いろんな場面で応用できるコンポーネントができたのではと思います。
デモサイトです。
デモコードです。
ヘッダーに固定配置したら、YoutubeやTwitter、Tiktok、HashnodeなどのようなUIでも生かせそうですね。
デモではリスト形式ですが、カード形式で表示してもいいかもです。
今回、タブインデックスは頑張ってみました。インプット系入ってくると大変ですよね。
絞り込んでいるときにリストのタブフォーカスが有効になっているときは矢印キーの操作を早期リターンで処理対象外にしているのがポイントです。
Escボタンは飾りなんですが、webkitのshadow-elementでデフォルトの×ボタンが表示されてしまうので、それを隠すためです。適宜アイコン等で隠すのがいいかもしれませんね。
簡単ですが、以上です。