# Building Search UIs

You can use the open source InstantSearch.js (opens new window) library, along with our Typesense-InstantSearch-Adapter (opens new window) to build a plug-and-play full-featured search interface, with just a few lines of code.

# Walk-through

Let's start with a starter template:

A couple of setup pointers for the npx create-instantsearch-app command above:

  • InstantSearch template: you can pick any one of the web libraries we support: InstantSearch.js, React, Vue or Angular.
  • InstantSearch.js version: you can leave it at the default
  • Application ID: can be any string - we'll be replacing this later in the guide
  • Search API key: can be any string - we'll be replacing this later in the guide with your Typesense Search-only API Key
  • Index name: the name of your collection in Typesense
  • Attributes to display: leave it as (none)

Let's now install the Typesense InstantSearch adapter, to be able to use InstantSearch with a Typesense backend:

To get InstantSearch.js to use the Typesense adapter, open src/app.js and edit how InstantSearch is initialized, from this:

to this:

We're essentially creating a searchClient with the adapter and passing it to instantsearch when initializing it.

Now, you can use any of the widgets supported by InstantSearch to build a search interface. In this walkthrough, we'll add a search box, along with results:

    search.addWidgets([
    instantsearch.widgets.searchBox({
      container: '#searchbox',
    }),
    instantsearch.widgets.hits({
      container: '#hits',
      templates: {
        item: `
          <div>
            <img src="" align="left" alt="" />
            <div class="hit-name">
              {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
            </div>
            <div class="hit-description">
              {{#helpers.highlight}}{ "attribute": "authors" }{{/helpers.highlight}}
            </div>
            <div class="hit-price">\$</div>
            <div class="hit-rating">Rating: </div>
          </div>
        `,
      },
    }),
    instantsearch.widgets.pagination({
      container: '#pagination',
    }),
  ]);

  search.start();

Now run npm start to start the dev server and view the app. You should now have a fully-functioning instant search interface with a search box, results that update as you type and pagination.

# Demo App

Here's a repo with a working version of the app, following the instructions above: https://github.com/typesense/typesense-instantsearch-demo (opens new window). The repo also contains quick commands to start a local Typesense server (npm run typesenseServer) and index the books collection used in this example (npm run populateTypesenseIndex).

InstantSearch.js also has React (opens new window), Vue (opens new window), Angular (opens new window) cousins. The Typesense InstantSearch adapter is also compatible with them. Similar to the above, you only need to swap the searchClient to the one provided by Typesense adapter. The rest of the instructions found in each of these repos work without additional changes.

Last Updated: 10/7/2021, 10:16:33 AM