Ionicのion-searchbarでAlgolia Instantsearchの検索を実行する #AlgoliaJP

この記事は、「Algolia Advent Calendar 2020」の投稿です。

このサイトの検索フォームは、Ionicのion-searchbarタグを使って実装しています。

SSG / SSRを実行するNext.jsを使っている関係上、@ionic/reactではなく@ionic/coreを直接使っているのですが、ion-searchbarにAlgoliaの検索を仕込むのにちょっとてこずったので、その時のコードを紹介します。

export const IonicSearch = connectSearchBox(({
    currentRefinement,
    refine,
}) => {
    const handleInput = useCallback((event) => {
        refine(event.target.value)
    }, [refine])
    return (
    <ion-searchbar
        value={currentRefinement}
        onInput={handleInput}
        placeholder="WP Kyoto"
    />)
})

connectSearchBoxを利用し、入力された値はcurrentRefinementを利用して表示します。今回は入力毎に検索を実行するので、onInputのイベントを拾って、refineを実行させるようにしました。

あとはこのコンポーネントを、InstantSearchの子・孫要素として配置すればOKです。

今回の例ではion-searchbarでしたが、各UIライブラリの検索フォームを使いたい場合にも応用できると思います。