\n\t\t\t\t\t ${components.Highlight({ hit, attribute: \"chapterTitle\" })}\n\t\t\t\t\t

\n `,\n },\n }),\n]);\n\nexport default search;\n\nAdd InstantSearch HTML\nAdd the below code snippet to your project. To explore additional UI widgets, see our \nInstantSearch.js widgets.\n

\n \n

\n\nAdd custom styles\nYou can add styles if you'd like to customize the look and feel of your InstantSearch experience.\n.ais-SearchBox {\n margin-bottom: 1em;\n}\n\n.ais-InstantSearch {\n max-width: 960px;\n width: 100%;\n display: block;\n overflow: hidden;\n margin: 0 auto\n}\n\n.ais-Hits-item {\n margin-left: 0;\n width: 100%;\n}\n\n.ais-Hits-item img {\n margin-right: 1em\n}\n\n.ais-Hits-list {\n margin-bottom: 1em;\n}\n\nRender InstantSearch\nLastly, render InstantSearch by importing the search.js module and calling search.start().\nimport search from \"./search.js\";\nimport 'instantsearch.css/themes/satellite.css';\n\nsearch.start();\n************************************************************************************************************************\ncdn instant search\n3.57 KB • 106 extracted lines\nFormatting may be inconsistent from source.\nGUIDES / BUILDING SEARCH UI\nMAR 05, 2024\nHow to install InstantSearch.js\nON THIS PAGE\n\n1. With a packaging system\n2. Directly in your page\n3. Load the styles\n4. With the create-instantsearch-app CLI\n5. Browser support\nYou can use InstantSearch.js either with a direct link in your web page or with a packaging system.\nWith a packaging system#\nIf you have a JavaScript build tool, you can install InstantSearch.js from npm:\n\nShell\nCopy\nnpm install algoliasearch instantsearch.js\nThen in your module, you can load the main package:\n\nJavaScript\nCopy\nimport algoliasearch from 'algoliasearch/lite';\nimport instantsearch from 'instantsearch.js';\nimport { searchBox, hits } from 'instantsearch.js/es/widgets';\n\nconst searchClient = algoliasearch('L3YFVOR7YL', '7fb55c7d480ef8b1ad09b55bf3d57afd');\n\nconst search = instantsearch({\n indexName: 'demo_ecommerce',\n searchClient,\n});\n\nsearch.addWidgets([\n searchBox({\n container: \"#searchbox\"\n }),\n\n hits({\n container: \"#hits\"\n })\n]);\n\nsearch.start();\nDirectly in your page#\nThis method uses the version of InstantSearch.js from the jsDelivr CDN:\n\nHTML\nCopy\n\n\nThe jsDelivr CDN is highly available with over 110 locations in the world.\n\nYou will then have access to the instantsearch function in the global scope (window).\n\nJavaScript\nCopy\nconst searchClient = algoliasearch('L3YFVOR7YL', '7fb55c7d480ef8b1ad09b55bf3d57afd');\n\nconst search = instantsearch({\n indexName: 'demo_ecommerce',\n searchClient,\n});\n\nsearch.addWidgets([\n instantsearch.widgets.searchBox({\n container: '#searchbox',\n }),\n\n instantsearch.widgets.hits({\n container: '#hits',\n })\n]);\n\nsearch.start();\nLoad the styles#\nYou then need to manually load the companion CSS file into your page:\n\nHTML\nCopy\n\nOr you can load the satellite theme widget styles into your page.\n\nHTML\nCopy\n\nYou can find more information in the styling guide.\nWith the create-instantsearch-app CLI#\nAlternatively, you can use create-instantsearch-app to instantly set up a working InstantSearch boilerplate. Similar to other interactive command-line applications, you run it either with npm or with yarn:\n\nshell\nCopy\nnpx create-instantsearch-app@latest 'getting-started'\n# or\nyarn create instantsearch-app 'getting-started'\nTo launch the app, type inside your terminal:\n\nshell\nCopy\ncd getting-started\nnpm start # or yarn start\nBrowser support#\nThe code samples used in this documentation use JavaScript syntax not natively supported by older browsers like Internet Explorer 11. If your site needs to support older browsers, make sure to use a tool like Babel to transform your code into code that works in the browsers you target.\n\nAlgolia supports the last two versions of the major browsers: Chrome, Edge, Firefox, Safari.\nTo support Internet Explorer 11 you need polyfills for: Array.prototype.find, Array.prototype.includes, Promise, Object.entries, and Object.assign.\n ************************************************************************************************************************","deleted","label",[115],"permalink","https://www.val.town/x/willthereader/AlgoliaDocumentaion/code/main.tsx","extension","actionData","errors"]