問題タブ [instantsearch.js]

ここの初心者。

Instantsearch.js ライブラリを使用した Angular 5 アプリケーションでは、CRUD 操作でモデルから Algolia キャッシュをリロードするにはどうすればよいですか? データベースとして Cloud Firestore を使用しており、データを Algolia と同期するためのクラウド機能があります。

現在、変更を有効にするにはブラウザを更新する必要があります。

Algolia instantsearch.js を使用して検索結果を表示するサービスを構築しています。

プロジェクトの開始にあたり、顧客をテーブルに表示するテンプレートを作成しました。次に、ユーザーが特定の顧客情報 (携帯電話番号など) を入力している間に、テーブルの内容が変化する機能を追加したいと考えました。これが、これを実現するために Algolia と instantsearch.js を使用した理由です。

私はそれを機能させることができましたが、全体のスタイリングに問題があります:

検索ボックスとヒットウィジェット(結果が表示される場所) は、特定の HTML/CSS 構造で DOM に追加されます。

検索ボックス：

ヒット:

HTML/CSS コードの準備ができているので、これらの結果を操作しようとするとイライラします (検索フィールドと結果のテーブルは、Web サイトの残りの部分のルック アンド フィールに一致するように設計されています)。

検索から取得したいのは、使用して正しい場所にデータを追加できる応答です。たとえば、顧客のデータを入力しようとしていますが、できません:

以下は私が使用するテンプレートです：

Laravel とブレード テンプレートを使用しているため、値の前に @ を追加しています。

私が得るのは、最初のすべての顧客からのすべてのデータを含むテーブルです。表の行は 1 つだけ作成されます。

JS コードでは、次を使用します。

ウィジェットの代わりにインスタントサーチから JSON 応答を取得する方法はありますか? これがinstantsearch.jsの全体的なポイントであるため、サーバーサイトルートをたどりたくありません。

単純な JSON 応答を取得できない場合、ウィジェットのレイアウトを変更するにはどうすればよいですか? すべての ais クラスをオーバーライドしますか?

前もって感謝します！

そのため、デフォルト設定を 10 である Algolia からファセットを取得するように変更しようとしています。 LaravelwithLaravel-ScoutとVue.jswithを使用していInstantSearch.jsます。Vue は私が使用するファセットを表示するためのテンプレートを提供してくれるので:

この方法では 10 しか得られませんLaravel-scout-settings。設定をダウンロードして追加しようとしmaxFacetsHits : 30ましたが、プッシュバックしても変更はありませんでした。テンプレートラッパーを使用してこれらの設定を実際に編集することは可能ですか、それともInstantSearchjsファイルを介してすべてのウィジェットと設定を追加するjsの方法を使用する必要があります.

お時間をいただきありがとうございます。

編集: 要約すると、私の質問は、より多くのファセットを表示する方法でしたか?

1 つの検索入力と複数のインデックス、および複数の統計/ページ付けウィジェットを使用して、instantsearch.js を実装しました。ページネーション ウィジェットを除いて、すべてが正しく機能しているようです。

ここにコードペンがあります https://codepen.io/flrrrhoffpauir/pen/EEpWre

「martin」を検索してから「ストーリー」タブをクリックすると、結果が表示され、ページネーションが機能していることがわかります。ここで [コレクション] タブをクリックすると、統計ウィジェットに従って返された結果の数に基づいてページネーション ウィジェットに正しいページ数があることがわかりますが、クリックしてページ 2 に移動すると、ページの上部にあり、ページ 2 のデータは読み込まれません。

2 つ以上のページネーション ウィジェットをページ上で一度に取得し、両方とも正しく機能させるにはどうすればよいですか?

これは、複数のインデックス検索を作成するために行ったものですが、複数のページ付けウィジェットはカバーしていません: https://jsfiddle.net/j9nwpz34/49/