āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/algolia/sitesearch/getting-started/vanilla ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
We provide a vanilla version of the search experiences that can be used in any project.
Use our CDN bundle or customize to your needs with our CodeSandbox or clone the repository github.com/algolia/sitesearch and start iterating on the components [Advanced usage]. Feel free to use it as a starting point for building your own experiences. When you are happy with your changes, you can build the vanilla bundle and use it in your project.
We document how to use each experience in the Experiences section under the VanillaJS tab.
Typical example for the search experience:
<link rel="stylesheet" href="https://unpkg.com/@algolia/sitesearch@latest/dist/search.min.css" />
<script src="https://unpkg.com/@algolia/sitesearch@latest/dist/search.min.js"></script>
<div id="search"></div>
<script>
SiteSearch.init({
container: "#search",
applicationId: "YOUR_APP_ID",
apiKey: "YOUR_API_KEY",
indexName: "YOUR_INDEX_NAME",
attributes: {
primaryText: "title", // the attribute to display in the hits list
secondaryText: "description", // the secondary attribute to display in the hits list
tertiaryText: "itunesAuthor", // the tertiary attribute to display in the hits list
url: "url", // the URL of the hit
image: "imageUrl", // the image URL of the hit
},
});
</script>
This code should already work out of the box with the bundled version.
We provide bundled version & hosted versions of the all the vanilla search experiences. They are available via CDN and can be used in any project.
<!-- styles -->
<link rel="stylesheet" href="https://unpkg.com/@algolia/sitesearch@latest/dist/<experience-name>.min.css" />
<!-- scripts -->
<script src="https://unpkg.com/@algolia/sitesearch@latest/dist/<experience-name>.min.js"></script>
<!-- Replace <experience-name> with the name of the experience you want to use -->
<Callout title="Note">Always use the minified version of the experience to reduce the size of the bundle. (.min.css and .min.js).</Callout>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā