Using docs-searchbar.js library without using docs-scraper tool

[curquiza]

Here is the question from one of our users on Slack:

Hey guys - if I want to use the awesome search bar at https://github.com/meilisearch/docs-searchbar.js but don't use the scraper (I'm pushing content via API calls), how do I address the "Object has no key lvl0" error? What metadata do I need to push?

The scraper: https://github.com/meilisearch/docs-scraper
Related tutorial: https://docs.meilisearch.com/resources/howtos/search_bar_for_docs.html

[curquiza]

First of all, the docs-searchbar.js library provides a search bar for documentation website.
It means the search bar would have this kind of display with titles (lvl0), sub-titles (lvl1), sub-sub-titles (lvl2) ... and sometimes content:

If it's what you want, you indeed should choose docs-searchbar.js as an integration tool for your search bar!
If you don't really want this kind of search bar, for a more classic one like a classic dropdown, you should choose another solution. We are currently building our front-end tool integration tools and we are sorry not to provide alternative ways in this post, but be sure there are coming soon 😉

The docs-searchbar.js library is built to be used with the docs-scraper tool.
What does it mean exactly?
The scraper scrapes the website content and pushes it into a MeiliSearch instance by formatting the documents (= the content) as docs-searchbar.js expects them.
docs-searchbar.js indeed expects to retrieve documents in a specific format, I mean with specific fields in the documents.
It means that if you don't use docs-scraper, you have to imitate its behavior by pushing the same kind of documents.

Following from the previous example (picture), here are the documents retrieved by MeiliSearch that docs-searchbar.js expects (sorry for this long output, but I think it's needed to be well-understood):

{
    "hits": [
        {
            "objectID": "7f5bf4c349da845c70bda26ee665b2f7bdb17210",
            "hierarchy_radio_lvl0": "null",
            "hierarchy_radio_lvl1": "null",
            "hierarchy_radio_lvl2": "Order of the rules",
            "hierarchy_radio_lvl3": "null",
            "hierarchy_radio_lvl4": "null",
            "hierarchy_radio_lvl5": "null",
            "hierarchy_lvl0": "💡 Main concepts",
            "hierarchy_lvl1": "Relevancy",
            "hierarchy_lvl2": "Order of the rules",
            "hierarchy_lvl3": "null",
            "hierarchy_lvl4": "null",
            "hierarchy_lvl5": "null",
            "hierarchy_lvl6": "null",
            "content": "null",
            "url": "https://docs.meilisearch.com/guides/main_concepts/relevancy.html#order-of-the-rules",
            "anchor": "order-of-the-rules"
        },
        {
            "objectID": "80c113d2f848bbfba08af5427ae3061c09a936a7",
            "hierarchy_radio_lvl0": "null",
            "hierarchy_radio_lvl1": "null",
            "hierarchy_radio_lvl2": "null",
            "hierarchy_radio_lvl3": "Changing the order of the attributes",
            "hierarchy_radio_lvl4": "null",
            "hierarchy_radio_lvl5": "null",
            "hierarchy_lvl0": "💡 Main concepts",
            "hierarchy_lvl1": "Relevancy",
            "hierarchy_lvl2": "Importance of the attributes",
            "hierarchy_lvl3": "Changing the order of the attributes",
            "hierarchy_lvl4": "null",
            "hierarchy_lvl5": "null",
            "hierarchy_lvl6": "null",
            "content": "null",
            "url": "https://docs.meilisearch.com/guides/main_concepts/relevancy.html#changing-the-order-of-the-attributes",
            "anchor": "changing-the-order-of-the-attributes"
        },
        {
            "objectID": "6fbadc30ff6abe5b6c4673d24d646b2a0f83992d",
            "hierarchy_radio_lvl0": "null",
            "hierarchy_radio_lvl1": "null",
            "hierarchy_radio_lvl2": "null",
            "hierarchy_radio_lvl3": "null",
            "hierarchy_radio_lvl4": "Example",
            "hierarchy_radio_lvl5": "null",
            "hierarchy_lvl0": "💡 Main concepts",
            "hierarchy_lvl1": "Relevancy",
            "hierarchy_lvl2": "Importance of the attributes",
            "hierarchy_lvl3": "Changing the order of the attributes",
            "hierarchy_lvl4": "Example",
            "hierarchy_lvl5": "null",
            "hierarchy_lvl6": "null",
            "content": "null",
            "url": "https://docs.meilisearch.com/guides/main_concepts/relevancy.html#example-2",
            "anchor": "example-2"
        },
        {
            "objectID": "2a708c62f7006f6928376c33b8378807f1ae21a4",
            "hierarchy_radio_lvl0": "null",
            "hierarchy_radio_lvl1": "null",
            "hierarchy_radio_lvl2": "null",
            "hierarchy_radio_lvl3": "null",
            "hierarchy_radio_lvl4": "null",
            "hierarchy_radio_lvl5": "null",
            "hierarchy_lvl0": "💡 Main concepts",
            "hierarchy_lvl1": "Relevancy",
            "hierarchy_lvl2": "Importance of the attributes",
            "hierarchy_lvl3": "null",
            "hierarchy_lvl4": "null",
            "hierarchy_lvl5": "null",
            "hierarchy_lvl6": "null",
            "content": "By default, the order of importance of the attributes is based on their order of appearance in the first document added. Then, each new attribute found in new documents will be added at the end of this ordered list",
            "url": "https://docs.meilisearch.com/guides/main_concepts/relevancy.html#importance-of-the-attributes",
            "anchor": "importance-of-the-attributes"
        },
        {
            "objectID": "aef5b43a7e89ab031d118934cd13c27842fb4796",
            "hierarchy_radio_lvl0": "null",
            "hierarchy_radio_lvl1": "null",
            "hierarchy_radio_lvl2": "null",
            "hierarchy_radio_lvl3": "null",
            "hierarchy_radio_lvl4": "null",
            "hierarchy_radio_lvl5": "null",
            "hierarchy_lvl0": "🧷 How to's",
            "hierarchy_lvl1": "How to deploy a MeiliSearch instance on DigitalOcean",
            "hierarchy_lvl2": "Create an out-of-the-box MeiliSearch",
            "hierarchy_lvl3": "5. Add your ssh key",
            "hierarchy_lvl4": "null",
            "hierarchy_lvl5": "null",
            "hierarchy_lvl6": "null",
            "content": "Select your SSH key in order to be able to connect to your droplet later. If you don't see your SSH key add yours to your account",
            "url": "https://docs.meilisearch.com/resources/howtos/digitalocean_droplet.html#_5-add-your-ssh-key",
            "anchor": "_5-add-your-ssh-key"
        }
    ],
    "offset": 0,
    "limit": 5,
    "nbHits": 42,
    "exhaustiveNbHits": false,
    "processingTimeMs": 2,
    "query": "order of"
}

All the fields have to be present to be well-interpreted by docs-searchbar.js. But you can set them to null.
The hierarchy_lvlX fields are the lvlX described on the picture above.
For the hierarchy_radio_lvlX, you can notice only one is filled: the "deepest" one of the hierarchy.
content is not mandatory and is the content you can find below the titles.
url and anchor are explicit and will redirect the search bar user to the right link.

---

I tried to find a great example to understand all the complexity of document format.
You can definitely use docs-searchbar.js without using docs-scraper if you push the same format of document into the MeiliSearch instance we will use with docs-searchbar.js.

Hope it helped! 😁

[zephraph]

It's notable that anyone taking this step will also need to ensure their index settings are correct. You can see the settings the scraper adds here.

[yankeeinlondon]

when you say "set to null" do you mean null or the string "null" as the screen shot suggests?

[bidoubiwa]

Did you had time to try it out @ksnyde ?
If not I will try it out and confirm which one it is

[bidoubiwa]

We welcome users to use the meilisearch-docsearch of tauri that is a better version of this project. For this reason, we deprecate this repository in favor of theirs.