- 首页
- 前端开发
- 自定义 Algolia 即时搜索搜索框和结果
自定义 Algolia 即时搜索搜索框和结果
[英] Customising Algolia instantsearch searchbox and results
本文介绍了自定义 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.
这篇关于自定义 Algolia 即时搜索搜索框和结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
