************************************************************************************************************************ Getting started guide for new local environment Formatting may be inconsistent from source. Install InstantSearch Our InstantSearch library helps provide you with a search experience out of the box. Select your preferred front-end framework to begin designing your search InstantSearch.js Create InstantSearch application Use create-instantsearch-app to create an example search experience with your data npx create-instantsearch-app@latest instantsearch-app \ --name 'instantsearch-app' \ --template 'InstantSearch.js' \ --app-id 'L3YFVOR7YL' \ --api-key '7fb55c7d480ef8b1ad09b55bf3d57afd' \ --index-name 'Test_index' \ --attributes-to-display 'chapterTitle' \ --no-interactive Start your local application Once your InstantSearch application is done downloading, navigate to the application and run the following command to start it up. npm start ************************************************************************************************************************ Getting started guide for local environment integration into local app 1.97 KB • 85 extracted lines Formatting may be inconsistent from source. Install InstantSearch package Add our InstantSearch.js npm package to your project. npm install algoliasearch instantsearch.js instantsearch.css If you'd like to load InstantSearch using a CDN, see our documentation . Add InstantSearch configuration Create a search.js file. It will contain configuration for algoliasearch client and InstantSearch.js UI. import algoliasearch from 'algoliasearch/lite'; import instantsearch from 'instantsearch.js'; import { searchBox, hits, configure } from 'instantsearch.js/es/widgets'; import { getPropertyByPath } from 'instantsearch.js/es/lib/utils'; const searchClient = algoliasearch('L3YFVOR7YL', '7fb55c7d480ef8b1ad09b55bf3d57afd'); const search = instantsearch({ indexName: 'Test_index', searchClient, }); search.addWidgets([ searchBox({ container: "#searchbox" }), configure({ hitsPerPage: 5 }), hits({ container: "#hits", templates: { item: (hit, { html, components }) => html`

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

`, }, }), ]); export default search; Add InstantSearch HTML Add the below code snippet to your project. To explore additional UI widgets, see our InstantSearch.js widgets.

Add custom styles You can add styles if you'd like to customize the look and feel of your InstantSearch experience. .ais-SearchBox { margin-bottom: 1em; } .ais-InstantSearch { max-width: 960px; width: 100%; display: block; overflow: hidden; margin: 0 auto } .ais-Hits-item { margin-left: 0; width: 100%; } .ais-Hits-item img { margin-right: 1em } .ais-Hits-list { margin-bottom: 1em; } Render InstantSearch Lastly, render InstantSearch by importing the search.js module and calling search.start(). import search from "./search.js"; import 'instantsearch.css/themes/satellite.css'; search.start(); ************************************************************************************************************************ cdn instant search 3.57 KB • 106 extracted lines Formatting may be inconsistent from source. GUIDES / BUILDING SEARCH UI MAR 05, 2024 How to install InstantSearch.js ON THIS PAGE 1. With a packaging system 2. Directly in your page 3. Load the styles 4. With the create-instantsearch-app CLI 5. Browser support You can use InstantSearch.js either with a direct link in your web page or with a packaging system. With a packaging system# If you have a JavaScript build tool, you can install InstantSearch.js from npm: Shell Copy npm install algoliasearch instantsearch.js Then in your module, you can load the main package: JavaScript Copy import algoliasearch from 'algoliasearch/lite'; import instantsearch from 'instantsearch.js'; import { searchBox, hits } from 'instantsearch.js/es/widgets'; const searchClient = algoliasearch('L3YFVOR7YL', '7fb55c7d480ef8b1ad09b55bf3d57afd'); const search = instantsearch({ indexName: 'demo_ecommerce', searchClient, }); search.addWidgets([ searchBox({ container: "#searchbox" }), hits({ container: "#hits" }) ]); search.start(); Directly in your page# This method uses the version of InstantSearch.js from the jsDelivr CDN: HTML Copy The jsDelivr CDN is highly available with over 110 locations in the world. You will then have access to the instantsearch function in the global scope (window). JavaScript Copy const searchClient = algoliasearch('L3YFVOR7YL', '7fb55c7d480ef8b1ad09b55bf3d57afd'); const search = instantsearch({ indexName: 'demo_ecommerce', searchClient, }); search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', }), instantsearch.widgets.hits({ container: '#hits', }) ]); search.start(); Load the styles# You then need to manually load the companion CSS file into your page: HTML Copy Or you can load the satellite theme widget styles into your page. HTML Copy You can find more information in the styling guide. With the create-instantsearch-app CLI# Alternatively, 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: shell Copy npx create-instantsearch-app@latest 'getting-started' # or yarn create instantsearch-app 'getting-started' To launch the app, type inside your terminal: shell Copy cd getting-started npm start # or yarn start Browser support# The 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. Algolia supports the last two versions of the major browsers: Chrome, Edge, Firefox, Safari. To support Internet Explorer 11 you need polyfills for: Array.prototype.find, Array.prototype.includes, Promise, Object.entries, and Object.assign. ************************************************************************************************************************

AlgoliaDocumentaion