Go to homev1.11 Docs

    Front-end integration

    In the quick start tutorial, you learned how to launch Meilisearch and make a search request. This article will teach you how to create a simple front-end interface to search through your dataset.

    Using instant-meilisearch is the easiest way to build a front-end interface for search. instant-meilisearch is a plugin that establishes communication between a Meilisearch instance and InstantSearch. InstantSearch, an open-source project developed by Algolia, renders all the components needed to start searching.

    Let's try it!
    1. Create an empty file and name it index.html
    2. Open it in a text editor like Notepad, Sublime Text, or Visual Studio Code
    3. Copy-paste one of the code samples above—either vanilla JavaScript, Vue 2, or React— and save the file
    4. Open index.html in your browser by double-clicking it in your folder

    The following code sample uses plain JavaScript.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
  </head>
  <body>
    <div class="wrapper">
      <div id="searchbox" focus></div>
      <div id="hits"></div>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
  <script>
    const search = instantsearch({
      indexName: "movies",
      searchClient: instantMeiliSearch(
        "http://localhost:7700"
      ).searchClient
      });
      search.addWidgets([
        instantsearch.widgets.searchBox({
          container: "#searchbox"
        }),
        instantsearch.widgets.configure({ hitsPerPage: 8 }),
        instantsearch.widgets.hits({
          container: "#hits",
          templates: {
          item: `
            <div>
            <div class="hit-name">
                  {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
            </div>
            </div>
          `
          }
        })
      ]);
      search.start();
  </script>
</html>

    Here's what's happening:

    • The first four lines of the <body> add two container elements: #searchbox and #hits. instant-meilisearch creates the search bar inside #searchbox and lists search results in #hits
    • The first two<script src="…"> tags import libraries needed to run instant-meilisearch
    • The third and final <script> tag is where you customize instant-meilisearch

    You should now have a working front-end search interface. Consult instant-meilisearch's documentation for more information on how to further customize your search interface.