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

本文介绍了自定义 Algolia 即时搜索搜索框和结果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

我设法让它工作了，但我在设计整个东西时遇到了问题:

searchbox 和 hits 小部件(显示结果的地方)被添加到具有特定 HTML/CSS 结构的 DOM 中:

搜索框:

<input autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="搜索客户.." role="textbox" spellcheck="false" type="text" value="" class="ais-搜索框--输入"><!- Algolia 由徽标提供支持 --><span class=""><div class="ais-search-box--powered-by">...<a class="ais-search-box--powered-by-link">...</a>

</span><!- 搜索放大镜图标 --><span class="ais-search-box--magnifier-wrapper"><div class="ais-search-box--magnifier">...</div></span><!- 清除搜索图标 --><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--item">第一客户数据(全部)

<div class="ais-hits--item">第二个客户数据(全部)

<div class="ais-hits--item">第三个客户数据(全部)

<div class="ais-hits--item">第一客户数据(全部)

尝试处理这些结果令人沮丧，因为我已准备好 HTML/CSS 代码(搜索字段和结果表旨在与网站其余部分的外观和感觉相匹配).

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

<头><tr><th>姓名</th><th>姓氏</th><th>电子邮件</th><th>移动</th></tr></thead><tr id="hits"></tr></tbody>

以下是我使用的模板:

因为我使用的是 Laravel 和刀片模板，所以我在值前面添加了 @.

我得到的是一个表格，其中包含来自所有客户的所有数据.只创建了一个表格行.

在 JS 代码中，我使用以下内容:

var search = Instantsearch({appId: '我的应用程序 ID',apiKey: 'my-search-only-api-key',indexName: '我的索引',网址同步:假，搜索参数:{每页点击数:10}});search.addWidget(Instantsearch.widgets.searchBox({容器:'#searchbox'，placeholder: '搜索客户..',供电:真实，包裹输入:假}));search.addWidget(Instantsearch.widgets.hits({容器:'#hits'，模板:{项目:document.getElementById('hit-template').innerHTML,empty: "我们没有找到任何搜索结果 "{{query}}""}}));搜索开始()；

有没有办法只从即时搜索而不是小部件获取 JSON 响应?我不想走服务器站点路线，因为这是 Instantsearch.js 的重点.

如果我无法取回简单的 JSON 响应，我该怎么做才能更改小部件的布局.覆盖所有 ais 类?

提前致谢！

解决方案

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

I am building a service that uses Algolia instantsearch.js to display search results.

Starting the project I created a template where I displayed our customers in a table. Then I wanted to add the functionality that the contents of the table change while a user is typing for a specific customer info (ex. mobile number). This is why I used Algolia and instantsearch.js to achieve this.

I managed to have it working but I have a problem with styling the whole thing:

The searchbox and hits widgets (where the results are displayed) are added to the DOM with a specific HTML/CSS structure:

Searchbox:

<!- 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>

Hits:

<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>

Trying to work with these results it's frustrating since I have my HTML/CSS code ready (search field and table for results is designed to match the look and feel of the rest of the website).

What i want to get back from search is a response that i can use and add data in the correct place. For example now i am trying to populate the with the customer's data but i can't:

<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>

Below is the template I use:

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

I am adding @ in front of the value since I am using Laravel and blade template.

What i get is a table with all data from all customers in the first . Only one table row is created.

In JS code I use the following:

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();

Is there a way to just get a JSON response from instantsearch instead of a widget? I dont want to go down the server site route, since this is the whole point of instantsearch.js.

If I cant get back simple JSON response, what do I have to do to change the layout of the widgets. Override all ais classes?

Thanks in advance!

解决方案

You can't have a full control of what is render with the widget API. But there is another API called connectors. This one lets you create a custom rendering without reimplementing the core logic of the widget. You can take a look at this API on the documentation.