|<!-- -->flabaka.com

GatsbyJSブログの検索フォームを、複数語対応にしてみる

GatsbyJSブログの検索フォームを、複数語対応にしてみる

単一語句での検索

以前 GatsbyJS のブログに、検索機能を実装してみた記事はこちら

Input エリアに検索語句を入力すると、リアルタイムに記事がリストアップされる感じだったんですが、検索語句は 1 語のみの対応でした。

検索語句を一つ入力して、半角スペースを入力したところで、(記事が)何も表示されなくなっていました。

複数語句対応にしてみる

複数語句に対応する様にしたいなぁ…と思っていたので、あれこれやってみました。

  1. 検索語句は 3 語まで
  2. リアルタイムに記事はリストアップされない

検索語句は 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 エリアが空になったら、絞り込んだ記事から全記事を表示する様にしてあります。

ひとまずこんな感じになりましたが、(細かいところは)使いながら修正していくつもりです。

©2022 flabaka.com