Algolia integration #490

amrutadotorg · 2024-07-07T22:04:59Z

amrutadotorg
Jul 7, 2024

Hi I was wondering how to implement Algolia search into SQLPage.

This code below provides a basic implementation of Algolia search in an HTML file. Here's a breakdown of what you need to do:

Replace 'YOUR_APP_ID' and 'YOUR_SEARCH_API_KEY' with your actual Algolia App ID and Search API Key.
Modify the 'YourIndexName' in the instantsearch configuration.

The search results will display the post title and excerpt.
This implementation uses Algolia's InstantSearch.js library, which provides a quick way to add search functionality to your web app.

To integrate this into your existing app:

Include the necessary Algolia scripts and CSS in your HTML file's section. (This we can do via the shell component)
Add the HTML elements (#searchbox and #hits) where you want the search interface to appear in your app.
Include the JavaScript code in a <script> tag at the end of your or in a separate JS file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Algolia Search Example</title>
    <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.14.2/dist/algoliasearch-lite.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.49.4/dist/instantsearch.production.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.4.5/themes/satellite-min.css">
</head>
<body>
    <div class="container">
        <h1>Algolia Search</h1>
        <div id="searchbox"></div>
        <div id="hits"></div>
    </div>

    <script>
        const searchClient = algoliasearch('YOUR_APP_ID', 'YOUR_SEARCH_API_KEY');

        const search = instantsearch({
            indexName: 'YourIndexName',
            searchClient,
        });

        search.addWidgets([
            instantsearch.widgets.searchBox({
                container: '#searchbox',
            }),

            instantsearch.widgets.hits({
                container: '#hits',
                templates: {
                    item: (hit) => `
                        <div>
                            <h2>${instantsearch.highlight({ attribute: 'post_title', hit })}</h2>
                            <p>${instantsearch.highlight({ attribute: 'post_excerpt', hit })}</p>
                        </div>
                    `,
                },
            })
        ]);

        search.start();
    </script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Algolia integration #490

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Algolia integration #490

Uh oh!

Uh oh!

amrutadotorg Jul 7, 2024

Replies: 0 comments

amrutadotorg
Jul 7, 2024