Comments (5)
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! π
from docs-searchbar.js.
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.
from docs-searchbar.js.
when you say "set to null" do you mean null
or the string "null" as the screen shot suggests?
from docs-searchbar.js.
Did you had time to try it out @ksnyde ?
If not I will try it out and confirm which one it is
from docs-searchbar.js.
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.
from docs-searchbar.js.
Related Issues (20)
- Make a clear explaination of what the repo does at the start of the readme
- Cypress tests should not work with a remote MeiliSearch instance HOT 2
- Question: search bar's cardinality with indexes HOT 2
- Add a scrolling system to see further results HOT 3
- Update of the URL linking to the SVG of the `Meilisearch` part appearing in `Powered by ..` HOT 3
- Fix playground HOT 3
- MeiliSearchCommunicationError HOT 4
- Remove support for node 12 and ensure support for node 18
- React based SDK HOT 2
- Allow the docs-searchbar to be invoked using keyboard shortcut HOT 2
- Add a configuration to display searchbar in a modal HOT 9
- Update image inside of README with latest Meilisearch logo HOT 4
- Text in backticks does not appear in search results HOT 6
- Add Shadow Dom support
- Fix README table of contents links HOT 2
- Add a Scroll To Top Button HOT 2
- Auto search when search input has content and actived HOT 11
- Dynamically change index HOT 2
- Does it support Multi-index search? HOT 2
- New Docsearch HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docs-searchbar.js.