Customising Algolia instantsearch searchbox and results

问题

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!

回答1:

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.

来源：https://stackoverflow.com/questions/48887949/customising-algolia-instantsearch-searchbox-and-results

标签

javascript

html

customization

algolia

instantsearch.js