Algolia Instant Search
Integrate search engine with mdx blog
One thing is interesting is to build a 'full-text' search engine inside. Before trying to build a own custom one, let just explore existing thirty party library Algolia
InstantSearch is Algolia’s front-end library, and it’s much more than just a search box! It offers a collection of pre-built and customizable components that allow you to create a full-page user interface on your front end, complete with lightning-fast filtering capabilities. You can explore its potential with this Check out this React InstantSearch demo from Algolia from Algolia on CodeSandbox
Fetching Sample data
fetch("https://dashboard.algolia.com/sample_datasets/movie.json")
.then((data) => data.json())
.then((records) => {
const client = algoliasearch(
"87",
"7287f7d5f820"
);
const index = client.initIndex("your_index_name");
index.saveObjects(records, { autoGenerateObjectIDIfNotExist: true });
})
.catch((error) => {
console.error(error);
});Running the template
nvm use 20.0
npx create-instantsearch-app@latest ais-ecommerce-demo-app \
--template "InstantSearch.js" \
--app-id "B1G2GM9NG0" \
--api-key "aadef574be1f9252bb48d4ea09b5cfe5" \
--index-name demo_ecommerce \
--attributes-to-display name \
--attributes-for-faceting ''
yarn start --port 3001
How to install InstantSearch.js
npm install algoliasearch instantsearch.js
import { liteClient as algoliasearch } from 'algoliasearch/lite';
import instantsearch from 'instantsearch.js';
import { searchBox, hits } from 'instantsearch.js/es/widgets';
const searchClient = algoliasearch('undefined', 'undefined');
const search = instantsearch({
indexName: 'demo_ecommerce',
searchClient,
});
search.addWidgets([
searchBox({
container: "#searchbox"
}),
hits({
container: "#hits"
})
]);
search.start();<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.24.0/dist/algoliasearch-lite.umd.js" integrity="sha256-b2n6oSgG4C1stMT/yc/ChGszs9EY/Mhs6oltEjQbFCQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.74.0/dist/instantsearch.production.min.js" integrity="sha256-1OlwSxFMcBXdQtWWvx95HkDw88ZSOde0gyii+lyOkB4=" crossorigin="anonymous"></script>