Cool. I used your code with my index and i see res...
# community-help
s
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>
1