javascript - Algolia インスタントサーチの検索ボックスと結果のカスタマイズ

Question

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

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

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

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

検索ボックス：

<!- Input field -->
<input autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="Search for customers.." role="textbox" spellcheck="false" type="text" value="" class="ais-search-box--input">

<!- Algolia Powered by logo -->
<span class="">
    <div class="ais-search-box--powered-by">
      ...
      <a class="ais-search-box--powered-by-link">...</a>
    </div>
</span>

<!- Search magnifier icon -->
<span class="ais-search-box--magnifier-wrapper">
    <div class="ais-search-box--magnifier">...</div>
</span>

<!- Clear search icon -->
<span class="ais-search-box--reset-wrapper" style="display: none;">
    <button type="reset" title="Clear" class="ais-search-box--reset">...</button>
</span>

ヒット:

<div class="ais-hits">
    <div class="ais-hits--item">
        First customer data (all of them)
    </div>
    <div class="ais-hits--item">
        Second customer data (all of them)
    </div>
    <div class="ais-hits--item">
        Third customer data (all of them)
    </div>
    <div class="ais-hits--item">
        First customer data (all of them)
    </div>
</div>

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

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

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>Email</th>
            <th>Mobile</th>
        </tr>
    </thead>
    <tbody>
        <tr id="hits"></tr>
    </tbody>
</table>

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

<script type="text/html" id="hit-template">
    <td>@{{ name }}</td>
    <td>@{{ surname }}</td>
    <td>@{{ email }}</td>
    <td>@{{ mobile }}</td>
</script>

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

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

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

var search = instantsearch({
    appId: 'my-app-id',
    apiKey: 'my-search-only-api-key',
    indexName: 'my-indices',
    urlSync: false,
    searchParameters: {
        hitsPerPage: 10
    }
});

search.addWidget(
    instantsearch.widgets.searchBox({
        container: '#searchbox',
        placeholder: 'Search for customers..',
        poweredBy: true,
        wrapInput: false
    })
);

search.addWidget(
    instantsearch.widgets.hits({
        container: '#hits',
        templates: {
            item: document.getElementById('hit-template').innerHTML,
            empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
        }
    })
);


search.start();

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

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

前もって感謝します！