LoginSignup
3
0

More than 3 years have passed since last update.

algolia(instantsearch.js)でイニシャル検索ってどうやるの??

Last updated at Posted at 2020-12-03

クリスマスまであと21日!!ヽ(=´▽`=)ノ
本日は再び大野が担当致しますm(_ _)m
(1日目の記事も担当しておりました!)

algolia(instantsearch.js)でページ表示タイミングで検索ってどうやるの??

はい、コレは純粋に私が直面した問題でした。
algoliaはとても便利なのですが如何せん日本語の情報が少ない気がしますね・・・

結論から言うととても簡単です。

instantsearch.widgets.configure({
  filters: filters,
}),

これを使えばいけます!!b(・∀・)

具体的なコードは以下

// お決まりの初期化
const search = instantsearch({
  indexName: searchIndex,
  searchClient: algoliasearch('keystring', 'secretstring'),
  routing: true,
});

// 各種検索設定
search.addWidgets([
  // 検索ボックスの配置
  instantsearch.widgets.searchBox({
    container: '#search',
    placeholder: 'フリーワード...',
    showReset: true,
    showLoadingIndicator: true,
  }),

  // 初期検索条件をセット!
  instantsearch.widgets.configure({
    filters: ['available: true AND (NOT uid: null)'],
  }),

  // 検索結果表示設定
  instantsearch.widgets.hits({
    ・・・

こんな感じで初期検索条件を指定出来るようになっています。
(エアコーディングですが有効フラグtrueでuidがnullじゃないデータと言う検索条件を付与しています。)

初期条件の書き方はコチラを参考にしています。

https://www.algolia.com/doc/api-reference/api-parameters/filters/

コレだと初期検索条件がずっと検索条件に付いちゃうんだけど・・・

はい、その通りです。
完全に初回の検索条件を指定したいだけなんだけど・・・と言う場合はsearchFunctionと言うのを初期化時に指定する事で可能です。

// お決まりの初期化
var initialsearch = false;
const search = instantsearch({
  indexName: searchIndex,
  searchClient: algoliasearch('keystring', 'secretstring'),
  routing: true,
  // 検索前処理の追加
  searchFunction: function(helper) {
    if (false === initialsearch) {
      initialsearch = true;
      // 最初の検索条件を指定
      helper.setQuery(helper.state.query + '&available=true').search();  
    }
  }
});

これで初期化時の最初の検索の時だけ検索条件を変えるなどといった事が出来ます。

https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/#widget-param-searchfunction

参考になりましたら幸いですm(_ _)m

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0