Has anyone tried instantsearch.js using controller or livewire in Laravel. I went through documentation in Typesense for Laravel and it uses inertia.js as example. It will be great if we have instantsearch.js implmentation given using controllers or livewire as well? Any pointers will help me.

CC: @Fanis Tharropoulos

I'm not sure I understand the question properly. If you are asking for guidance on building an instantsearch.js using Laravel controllers, it would be impossible, as Instantsearch is a frontend, JS library. If you're asking about building a Livewire version of the inertia app, using controller methods for searching, that is feasible

Hi @Fanis Tharropoulos... yes I am looking for building a Livewire version of the inertia app, uisng controller methods. In fact all i am looking for is having correct approach and setup for instantsearch.js using livewire or controller or may be combined usage of controller and livewire. I installed instantsearch.js and typesense adaptor but somewhere missing in using it in Livewire correctly. My tech stack is Tailwind, Alpinejs, Livewire and Laravel. Any pointer. I am even fine if i could get existing game streaming app example covered by you in livewire version.

I'll be sure to look into creating an equivalent Livewire version then!

Thanks @Fanis Tharropoulos.

Is there any console logs?

I have vite.config.js installed and it should build. I have Lead Model and a Livewire component ListLeads which is just rendering its view file for now. I have this mega project with 15-16 models all with dedicated model search using Laravel Scout and typesense. But search logic for each is manually written which I find not efficient. I found instantsearch.js way great and covers all possible filters and sort with great speed. So for one the models Lead I am just testing instantsearch.js UI on its livewire view.

just tested the games demo with this, and it works just fine:

<div>
    <h1>Search Game</h1>
    <div class="container">
    <div class="search-panel">
        <div class="search-panel__results">
            <div id="searchbox"></div>
            <div id="hits"></div>
        </div>
    </div>

    <div id="pagination"></div>
</div>
</div>

@assets
    <script src="<https://cdn.jsdelivr.net/npm/typesense@1/dist/typesense.min.js>"></script>
    <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.73.0/dist/instantsearch.production.min.js>" integrity="sha256-gBDtQ3AJfoB4Sd7Yb5UWcgH5l1E3m38O4iXDuGjORMQ=" crossorigin="anonymous"></script>
    <script src=" <https://cdn.jsdelivr.net/npm/typesense-instantsearch-adapter@2.8.0/dist/typesense-instantsearch-adapter.min.js> "></script>
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/instantsearch.css@8.3.0/themes/reset-min.css>" integrity="sha256-D+cGTF0LVHjuEf+CDRkHeNw/KTHPg47t1AA/qmzxgtA=" crossorigin="anonymous">
@endassets
@script
<script>
    const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
        server: {
            apiKey: 'xyz', // Be sure to use an API key that only allows searches, in production
            nodes: [
                {
                    host: 'localhost',
                    port: '8108',
                    protocol: 'http',
                },
            ],
        },
        // The following parameters are directly passed to Typesense's search API endpoint.
        //  So you can pass any parameters supported by the search endpoint below.
        //  queryBy is required.
        //  filterBy is managed and overridden by InstantSearch.js. To set it, you want to use one of the filter widgets like refinementList or use the `configure` widget.
        additionalSearchParameters: {
            queryBy: 'name',
        },
    });
    const searchClient = typesenseInstantsearchAdapter.searchClient;

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

    search.addWidgets([
        instantsearch.widgets.searchBox({
            container: '#searchbox',
        }),
        instantsearch.widgets.configure({
            hitsPerPage: 8,
        }),
        instantsearch.widgets.hits({
            container: '#hits',
            templates: {
                item(item) {
                    return `
                        <div>
                          <div class="hit-name">
                            ${item._highlightResult.name.value}
                          </div>
                        </div>
                      `;
                },
            },
        }),
        instantsearch.widgets.pagination({
            container: '#pagination',
        }),
    ]);

    search.start();
</script>
@endscript

I have below key files. And I installed instantsearch.js and typesense adaptor using npm. Currently i am using sail in local environment. My scout configuration has a corresponding collection.

Maybe try using the CDNs from jsdelivr and see if that makes any difference? Also use the

@assets

tag for importing using jsdelivr

Is this correct? hits({ container: "#hits", templates: { item:

<div class="hit-name">
                    @{{ highlight.highlighted(item.title) }}
                </div>

, }, }),

It errors for me as well. Try using this:

<div>
                          <div class="hit-name">
                            ${item._highlightResult.name.value}
                          </div>
                      </div>

Cool. I used your code with my index and i see result with pagination. <!-- resources/views/livewire/search.blade.php --> <div> <div> <h1>Search Game</h1> <div class="container"> <div class="search-panel"> <div class="search-panel__results"> <div id="searchbox"></div> <div id="hits"></div> </div> </div> <div id="pagination"></div> </div> </div> @assets <script src="https://cdn.jsdelivr.net/npm/typesense@1/dist/typesense.min.js"></script> <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.73.0/dist/instantsearch.production.min.js" integrity="sha256-gBDtQ3AJfoB4Sd7Yb5UWcgH5l1E3m38O4iXDuGjORMQ=" crossorigin="anonymous"></script> <script src=" https://cdn.jsdelivr.net/npm/typesense-instantsearch-adapter@2.8.0/dist/typesense-instantsearch-adapter.min.js "></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.3.0/themes/reset-min.css" integrity="sha256-D+cGTF0LVHjuEf+CDRkHeNw/KTHPg47t1AA/qmzxgtA=" crossorigin="anonymous"> @endassets @script <script> const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({ server: { apiKey: 'xyz', // Be sure to use an API key that only allows searches, in production nodes: [ { host: 'localhost', port: '8108', protocol: 'http', }, ], }, // The following parameters are directly passed to Typesense's search API endpoint. // So you can pass any parameters supported by the search endpoint below. // queryBy is required. // filterBy is managed and overridden by InstantSearch.js. To set it, you want to use one of the filter widgets like refinementList or use the

configure

widget. additionalSearchParameters: { queryBy: 'title', }, }); const searchClient = typesenseInstantsearchAdapter.searchClient; const search = instantsearch({ searchClient, indexName: 'leads_index', }); search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', }), instantsearch.widgets.configure({ hitsPerPage: 8, }), instantsearch.widgets.hits({ container: '#hits', templates: { item(item) { return ` <div> <div class="hit-name"> ${item._highlightResult.title.value} </div> </div> `; }, }, }), instantsearch.widgets.pagination({ container: '#pagination', }), ]); search.start(); </script> @endscript </div>

So I take it we've got the problem sorted?

Let me try all widgets? But I feel we should have better ways especially for livewire and blade. Livewire genrally recommed using alpinejs. And I feel we should have blade components mapped to instantsearch.js

Yeah, if this project picks up some traction, you should use the components in your own project. It has to provide the ability to pass the client itself on the component, much like how the adapter is used on Javascript

Thanks @Fanis Tharropoulos.

Glad to be of help 😁