GatsbyJSブログの検索フォームを、複数語対応にしてみる
目次
単一語句での検索
以前 GatsbyJS のブログに、検索機能を実装してみた記事はこちら
Input エリアに検索語句を入力すると、リアルタイムに記事がリストアップされる感じだったんですが、検索語句は 1 語のみの対応でした。
検索語句を一つ入力して、半角スペースを入力したところで、（記事が）何も表示されなくなっていました。
複数語句対応にしてみる
複数語句に対応する様にしたいなぁ…と思っていたので、あれこれやってみました。
- 検索語句は 3 語まで
- リアルタイムに記事はリストアップされない
検索語句は 3 語まで
検索語句をいくつまで対応させようか迷いましたが、（個人ブログなので）ひとまず 3 語くらいでいいかな？ と。
例えばですが、nextjs、remark、mdx の語句を input エリアに入力し、Enter（Return）を押すと、三つの検索語句全てに引っ掛かる記事がリストアップされます。
nextjs && remark && mdx;
コードで書いたら、上記の様な感じですね。
リアルタイムに記事はリストアップされない
input エリアに語句を入力し、Enter（Return）を押すと、検索が行われます。
リアルタイム表示は、今のところ非対応です。（そのうちやるかも？）
当初検索ボタンを配置しようかな？ とも思ったんですが、自分が検索する際は、Enter（Return）を押すことが多いので、今回ボタンは配置しませんでした。
keypress は非推奨
Enter（Return）は keypress イベントで良さそうかな？ と思ったんですが、調べると非推奨になっているみたいでした。
React の Docs には onKeyPress も掲載されているのですが、今回は onKeyDown イベントを使って実装してみました。
const keyDown = (e) => {
if (e.key === "Enter") {
console.log("Enterキーが押されました！");
}
};
return (
<input
type="text"
placeholder="検索ワードを入力"
id="textval"
onKeyDown={(e) => keyDown(e)}
/>
);
React の Docs に、key プロパティで使える値は DOM Level3 Events Spec のドキュメントを見てねとあったので…
Whitespace Keys の箇所に、Enter（Mac では Return）は、"Enter"で OK と書かれていたので、使ってみました。
input エリアの値を取得
input エリアの値を取得するには、以下の方法で行いました。
const keyDown = (e) => {
if (e.key === "Enter") {
//console.log("Enterキーが押されました！")
// const word = document.getElementById("textval").value
const word = e.target.value;
//console.log(word)
}
};
e.target.value でも、getElementById でも、どちらを使っても取得出来ました。
自分は e.target.value の方を使っています。
input エリアが空になったら、絞り込んだ記事から全記事を表示する様にしてあります。
ひとまずこんな感じになりましたが、（細かいところは）使いながら修正していくつもりです。