javascript - 自定义 Algolia 即时搜索搜索框和结果

Question

我正在构建一个使用 Algolia instantsearch.js 来显示搜索结果的服务。

开始该项目时，我创建了一个模板，在该模板中我在表格中显示了我们的客户。然后我想添加在用户输入特定客户信息(例如手机号码)时更改表格内容的功能。这就是我使用 Algolia 和 instantsearch.js 来实现这一目标的原因。

我设法让它工作，但我对整个事物的样式有问题:

searchbox 和 hits 小部件(显示结果的地方)被添加到具有特定 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 代码(搜索字段和结果表的设计与网站其余部分的外观和感觉相匹配)。

我想从搜索中得到的是一个我可以使用并在正确位置添加数据的响应。例如，现在我正在尝试用客户的数据填充，但我不能:

<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 和 blade 模板，所以我在值前面添加了 @。

我得到的是一个表格，其中第一个是所有客户的所有数据。仅创建一个表格行。

在 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 类？

提前致谢!

Answer 1

您无法完全控制使用小部件 API 呈现的内容。但是还有另一个 API 称为连接器。这允许您创建自定义呈现而无需重新实现小部件的核心逻辑。您可以在 the documentation 上查看此 API .