Integrate Meilisearch into a website#

Meilisearch can be integrated into any website as a web component (search bar) that is linked to a running Meilisearch instance.

Add the search bar to a web page#

To add a search bar to a web page, follow these steps:

Download the docs-searchbar.js package from a content delivery network. You can use this script tag:

<script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@2.4.1/dist/cdn/docs-searchbar.min.js"></script>

Initialize the search bar by calling the docsSearchBar function with the desired configuration. Here is an example:
```
<script>
let theSearchBar = docsSearchBar({
    hostUrl: 'https://backend.search.pyansys.com',
    apiKey: 'd5271738ba1a75af83748f615aca07f8a73fc353186ff04f28925104b6f49614',
    indexUid: 'ansys-pyansys-sphinx-docs',
    inputSelector: '#q',
    debug: false,
    enhancedSearchInput: false,
    enableDarkMode: 'auto'
})
</script>
```
- Replace the value shown for the hostUrl option with the URL where your search engine is hosted.
- Replace the value shown for the apiKey option with your public API key.
- Replace the value shown for the indexUid option with the unique name for the desired index.
- Modify values for other options (debug, enhancedSearchInput, and enableDarkMode) as needed.

This example shows how to add a search bar to a web page and link it to a Meilisearch instance:

<!doctype html>
<html lang="en">
  <body>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/docs-searchbar.js@latest/dist/cdn/docs-searchbar.min.css"
    />

    <div class="container">
      <div class="col-md-18">
        <input
          type="search"
          placeholder="docs-searchbar input"
          class="form-control"
          id="q"
          autofocus
        />
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@2.4.1/dist/cdn/docs-searchbar.min.js"></script>

    <script>
      let theSearchBar = docsSearchBar({
        hostUrl: "https://backend.search.pyansys.com",
        apiKey:
          "9c4013dc2ebd88143f99c5de25adbf1552c1dd7108266d3039be1fcffcf76fa8",
        indexUid: "ansys-pyansys-sphinx-docs",
        inputSelector: "#q",
        debug: false,
        enhancedSearchInput: false,
        enableDarkMode: "auto",
      });
    </script>
  </body>
</html>

Customize the style of the search bar#

Because the search bar is an HTML component, you can use CSS to customize its style. Here is an example:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/docs-searchbar.js@latest/dist/cdn/docs-searchbar.min.css"
/>
<h2 align="center">Example Search</h2>

<div class="container">
  <div class="col-md-18">
    <input
      type="search"
      placeholder="docs-searchbar input"
      class="form-control"
      id="q"
      autofocus
    />
  </div>

  <select id="indexUidSelector" style="margin-left: 20px" class="index-select">
    <option value="ansys-sphinx-theme-vdev">Ansys Sphinx theme</option>
    <option value="pyansys-pyaedt-sphinx-docs">PyAEDT</option>
    <option value="pymeilisearch-vdev">PyMeilisearch</option>
  </select>
</div>

<script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@2.4.1/dist/cdn/docs-searchbar.min.js"></script>

<script>
  let Search = docsSearchBar({
    hostUrl: "https://backend.search.pyansys.com",
    apiKey: "9c4013dc2ebd88143f99c5de25adbf1552c1dd7108266d3039be1fcffcf76fa8",
    indexUid: "ansys-sphinx-theme-vdev",
    inputSelector: "#q",
    debug: false,
    enhancedSearchInput: false,
    enableDarkMode: "auto",
  });

  // Add event listener to the select element
  document
    .getElementById("indexUidSelector")
    .addEventListener("change", function () {
      Search.indexUid = this.value;
      Search.inputSelector = "#docs-searchbar-suggestion";
    });

  document.getElementById("docs-searchbar-suggestion").focus();
</script>