Javascript 自定义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>

...
...
...
...

点击次数：

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

@{{name}}
@{{姓氏}
@{{email}}
@{{mobile}}

因为我使用的是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();

var search=instantsearch({
appId:“我的应用程序id”，
apiKey:“仅我的搜索api密钥”，
indexName:“我的索引”，
urlSync:false，
搜索参数：{
命中率：10
}
});
search.addWidget(
instantsearch.widgets.searchBox({
容器：“#搜索框”，
占位符：“搜索客户…”，
是的，
wrapInput:错误
})
);
search.addWidget(
instantsearch.widgets.hits({
容器：“#命中”，
模板：{
项目：document.getElementById（'hit-template'）.innerHTML，
空：“我们没有找到搜索\{query}}的任何结果”
}
})
);
search.start（）；

有没有办法从instantsearch而不是小部件获取JSON响应？我不想走服务器站点路线，因为这是instantsearch.js的全部要点

如果我不能得到简单的JSON响应，我需要做什么来改变小部件的布局。是否覆盖所有ais类

---

提前谢谢

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

非常感谢！使用connectSearchbox和connectHits，我成功地锁定了它！