こんにちわ。nap5です。


Algoliaのようなハンディ検索機能を使ったページ遷移を実現してみたので、紹介したいと思います。

矢印キーでぐるっと一周まわって移動できたり、Enterキー押下でページ遷移できるあれですね。Twitterの検索バーが有名かもしれません。最近だとtailwindcssの公式ドキュメントにあるAlgoliaのような検索モーダルに見られますかね。

この実装は結構難しかったのですが、なんとかそれっぽくはなりました。実はTwitterでもそうなんですが、ホバー時のアクティブメニューのインデックスと矢印キーで移動したときのアクティブメニューのインデックスをいい感じにハンドリングするのが難しく、マウスホバーの置き所によってはダブって背景色が表示されてしまいます。なんとかしようと試みたんですが、結構しんどかった印象でした。

そこんところを目を瞑れば、いろんな場面で応用できるコンポーネントができたのではと思います。

デモサイトです。

デモコードです。

ヘッダーに固定配置したら、YoutubeやTwitter、Tiktok、HashnodeなどのようなUIでも生かせそうですね。

デモではリスト形式ですが、カード形式で表示してもいいかもです。

今回、タブインデックスは頑張ってみました。インプット系入ってくると大変ですよね。

絞り込んでいるときにリストのタブフォーカスが有効になっているときは矢印キーの操作を早期リターンで処理対象外にしているのがポイントです。

Escボタンは飾りなんですが、webkitのshadow-elementでデフォルトの×ボタンが表示されてしまうので、それを隠すためです。適宜アイコン等で隠すのがいいかもしれませんね。

簡単ですが、以上です。