自定义Algolia Instantsearch搜索框和结果

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

我正在构建一个使用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代码(结果的搜索字段和表旨在与网站其余部分的外观相匹配).

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

<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和刀片模板，因此要在值前面添加@.

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

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

是否有一种方法可以从Instantsearch而不是小部件中获取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.