• Stars
    star
    140
  • Rank 252,031 (Top 6 %)
  • Language
    CSS
  • License
    MIT License
  • Created almost 10 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Instant-search demo (facets, sliders, paginations & more)

Note: this repository is hosting the demo that was previously located at algolia/examples


Instant-Search Demo

This is a sample project of an Algolia Instant-Search result page on an e-commerce website. Algolia is a Search API that provides a hosted full-text, numerical and faceted search.

Demos

Try out the demo Instant search

Simplified version

This project also includes a simplified version of the implementation that includes a few less filtering options. The code is available in the files index-simplified.html and search-simplified.js. You can see it live here.

Features

  • Full-JavaScript/frontend implementation based on instantsearch.js
  • Results page refreshed as you type
  • Relevant results from the first keystroke
  • Rich set of filters
    • Multi-level categories
    • Range slider
    • Star rating
  • Typo-tolerance
  • Multiple sort orders
    • By Relevance
    • By Highest Price
    • By Lowest Price
  • Backup search parameters in the URL

Run and develop locally

First, install nvm, then run:

git clone [email protected]:algolia/instant-search-demo.git
cd instant-search-demo
nvm use
npm install
npm start
open http://localhost:3000

We've included some credentials in the code allowing you to test the demo without any Algolia account.

Data import

If you want to replicate this demo using your own Algolia credentials that you can obtain creating a free account on Algolia.com.

Just install the Ruby algoliasearch gem and use the push.rb script to send the data and automatically configure the product index (same for both versions).

$ gem install algoliasearch
$ ./dataset_import/push.rb YourApplicationID YourAdminAPIKey YourIndexName

Then, you'll need to replace the demo credentials with your own:

  • in search.js and search-simplified.js, set your own APPLICATION_ID instead of "latency" (which is our demo APPLICATION_ID),
  • in search.js and search-simplified.js, set your own SEARCH_ONLY_API_KEY instead of "6be0576ff61c053d5f9a3225e2a90f76",
  • in search.js and search-simplified.js, set your own index name instead of "instant_search".

We've extracted 20 000+ products from the Best Buy Developer API. You can find the associated documentation here.

Tutorial

Follow this step by step tutorial (on Algolia.com) to learn how this implementation works and how it has been built using the instantsearch.js library.

A more general overview of filtering and faceting is available in a dedicated tutorial.

More Repositories

1

places

๐ŸŒ Turn any <input> into an address autocomplete
JavaScript
5,372
star
2

autocomplete

๐Ÿ”ฎ Fast and full-featured autocomplete library
TypeScript
4,668
star
3

docsearch

๐Ÿ“˜ The easiest way to add search to your documentation.
TypeScript
3,748
star
4

instantsearch

โšก๏ธ Libraries for building performant and instant search experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.
TypeScript
3,468
star
5

react-instantsearch

โšก๏ธ Lightning-fast search for React and React Native applications, by Algolia.
TypeScript
1,973
star
6

algoliasearch-client-javascript

โšก๏ธ A fully-featured and blazing-fast JavaScript API client to interact with Algolia.
TypeScript
1,259
star
7

github-awesome-autocomplete

:octocat: Add instant search capabilities to GitHub's search bar
JavaScript
1,062
star
8

vue-instantsearch

๐Ÿ‘€ Algolia components for building search UIs with Vue.js
JavaScript
856
star
9

shipjs

Take control of what is going to be your next release.
JavaScript
749
star
10

awesome-algolia

๐Ÿ”๐Ÿ‘‹ START HERE! A curated list of Algolia libraries, resources and projects.
681
star
11

algoliasearch-client-php

โšก๏ธ A fully-featured and blazing-fast PHP API client to interact with Algolia.
PHP
661
star
12

instantsearch-ios

โšก๏ธ A library of widgets and helpers to build instant-search applications on iOS.
Swift
573
star
13

voice-overlay-ios

๐Ÿ—ฃ An overlay that gets your userโ€™s voice permission and input as text in a customizable UI
Swift
535
star
14

hn-search

Hacker News Search
TypeScript
489
star
15

react-element-to-jsx-string

Turn a ReactElement into the corresponding JSX string
JavaScript
478
star
16

docsearch-configs

DocSearch - Configurations
JavaScript
454
star
17

sup3rS3cretMes5age

Simple to use, simple to deploy, one time self destruct messaging service, with hashicorp vault as a backend
Go
445
star
18

expect-jsx

โœ… toEqualJSX for expect assertion library
JavaScript
410
star
19

algoliasearch-rails

AlgoliaSearch integration to your favorite ORM
Ruby
398
star
20

scout-extended

Scout Extended: The Full Power of Algolia in Laravel
PHP
382
star
21

algoliasearch-wordpress

โŒ๐Ÿ—‘๐Ÿ™…โ€โ™‚๏ธ Algolia Search plugin for WordPress is no longer supported. Please use our API client guide instead
JavaScript
355
star
22

docsearch-scraper

DocSearch - Scraper
Python
293
star
23

color-extractor

Extract the dominant color(s) of your fashion articles!
Python
271
star
24

algoliasearch-netlify

Official Algolia Plugin for Netlify. Index your website to Algolia when deploying your project to Netlify with the Algolia Crawler
TypeScript
260
star
25

angular-instantsearch

โšก๏ธLightning-fast search for Angular apps, by Algolia
TypeScript
255
star
26

voice-overlay-android

๐Ÿ—ฃ An overlay that gets your userโ€™s voice permission and input as text in a customizable UI
Kotlin
243
star
27

algoliasearch-laravel

[Deprecated] We now recommend using Laravel Scout, see =>
PHP
239
star
28

jekyll-algolia

Add fast and relevant search to your Jekyll site
Ruby
211
star
29

algoliasearch-client-swift

โšก๏ธ A fully-featured and blazing-fast Swift API client to interact with Algolia.
Swift
203
star
30

algoliasearch-client-go

โšก๏ธ A fully-featured and blazing-fast Go API client to interact with Algolia.
Go
193
star
31

algoliasearch-client-python

โšก๏ธ A fully-featured and blazing-fast Python API client to interact with Algolia.
Python
192
star
32

search-bundle

Seamless integration of Algolia Search into your Symfony project.
PHP
191
star
33

atom-autocomplete-module-import

โš›๏ธ Search & install npm packages from import/require statements.
JavaScript
182
star
34

gatsby-plugin-algolia

A plugin to push to Algolia based on graphQl queries
JavaScript
176
star
35

algoliasearch-helper-js

Helper for implementing advanced search features with Algolia
JavaScript
174
star
36

datasets

Interesting datasets you could use with Algolia
173
star
37

youtube-captions-scraper

Fetch youtube user submitted or fallback to auto-generated captions
JavaScript
173
star
38

algoliasearch-django

Seamless integration of Algolia into your Django project.
Python
167
star
39

algoliasearch-client-ruby

โšก๏ธ A fully-featured and blazing-fast Ruby API client to interact with Algolia.
Ruby
166
star
40

algoliasearch-magento-2

Algolia Search integration for Magento 2 - compatible with versions from 2.3.x to 2.4.x
PHP
156
star
41

instantsearch-android

A library of widgets and helpers to build instant-search applications on Android.
Kotlin
153
star
42

pwa-ecom-ui-template

React/Next.js based starter kit, focused on delivering a rich Search & Discovery e-commerce experience.
TypeScript
145
star
43

npm-search

๐Ÿ—ฟ npm โ†”๏ธ Algolia replication tool โ›ท๏ธ ๐ŸŒ ๐Ÿ›ฐ๏ธ
TypeScript
127
star
44

algoliasearch-jekyll

โš  DEPRECATED Use jekyll-algolia instead.
Ruby
124
star
45

algoliasearch-client-csharp

โšก๏ธ A fully-featured and blazing-fast C# API client to interact with Algolia.
C#
113
star
46

kubernetes-hands-on

Kubernetes Hands-on by Algolia
110
star
47

firestore-algolia-search

TypeScript
108
star
48

frontman

๐Ÿ’Ž A Ruby-based static website generator
Ruby
107
star
49

create-instantsearch-app

โšก๏ธ Build InstantSearch apps at the speed of thought
JavaScript
107
star
50

algoliasearch-client-android

Algolia Search API Client for Android
Java
98
star
51

faux-jax

NO MORE MAINTAINED: Intercept and respond to requests in the browser (AJAX) and Node.js (http(s) module)
JavaScript
96
star
52

cli

๐Ÿ” Algoliaโ€™s official CLI devtool
Go
94
star
53

algolia-cli-old

[DEPRECATED] This repo and npm package are no longer maintained or supported. The new official command line tool can be found here: https://github.com/algolia/cli
JavaScript
82
star
54

doc-code-samples

This repository holds the Algolia documentation big code samples like GeoSearch, Calendar...
TypeScript
82
star
55

rollup-jest-boilerplate

๐ŸŽ‰ Full featured boilerplate for building JavaScript libraries the modern way
JavaScript
80
star
56

marvel-search

Searchable list of all Marvel superheroes and supervillains
JavaScript
77
star
57

examples

Set of code samples highlighting the different ways to use the Algolia API
CSS
76
star
58

instantsearch-ios-examples

Example apps built with InstantSearch iOS
Swift
67
star
59

instantsearch-android-examples

Example apps built with algolia/instantsearch-android
Kotlin
63
star
60

algoliasearch-client-css

Algolia Search API Client for CSS
JavaScript
63
star
61

mongoolia

Keep your mongoose schemas synced with Algolia
JavaScript
58
star
62

algoliasearch-client-kotlin

โšก๏ธ A fully-featured and blazing-fast Kotlin/Android API client to interact with Algolia.
Kotlin
56
star
63

hn-reactnative-sample

Sample Hacker News Search app by Algolia based on React Native.
JavaScript
54
star
64

jest-serializer-html

Jest snapshot serializer that beautifies HTML.
JavaScript
51
star
65

search-insights.js

Library for reporting click, conversion and view metrics using the Algolia Insights API
TypeScript
51
star
66

redux-updeep

small reducer generator that uses updeep to immutably deep merge partial updates into the reducer's state
JavaScript
50
star
67

algoliasearch-alexa

๐Ÿ”Š Search by voice in Alexa, powered by Algolia
JavaScript
45
star
68

chunk-text

๐Ÿ”ช chunk/split a string by length without cutting/truncating words.
JavaScript
43
star
69

algoliasearch-client-java

โšก๏ธ A fully-featured and blazing-fast Java API client to interact with Algolia.
Java
43
star
70

react-nouislider

CSS
42
star
71

react-test-boilerplate

Companion project for Algolia's React unit testing blog post
JavaScript
41
star
72

demo-geo-search

Demo code illustrating the geo search features of Algolia
JavaScript
39
star
73

laravel-scout-algolia-macros

DEPRECATED: Use of this repository is deprecated. Please use Scout Extended - https://github.com/algolia/scout-extended instead.
PHP
39
star
74

algoliasearch-client-objc

Algolia Search API Client for iOS & OS X
Objective-C
38
star
75

algoliasearch-crawler-github-actions

Algolia Crawler Github action
TypeScript
38
star
76

docsearch-website

Previous repository for the DocSearch documentation website, now at https://github.com/algolia/docsearch/tree/next/packages/website
CSS
38
star
77

algoliasearch-client-node

DEPRECATED
36
star
78

wordpress-docker

Simple docker based environment for WordPress plugins and themes development.
Shell
36
star
79

algoliasearch-rails-example

AlgoliaSearch+Ruby on Rails examples
Ruby
36
star
80

elasticsearch-topk-plugin

Elasticsearch Top-K Aggregation Plugin
Java
35
star
81

algolia-sitemap

a node library allowing you to generate sitemaps from an Algolia index.
JavaScript
33
star
82

jekyll-algolia-example

Front-end example of the jekyll-algolia plugin
HTML
33
star
83

vue-instantsearch-examples

Examples for Vue InstantSearch v1, v2 links: https://github.com/algolia/vue-instantsearch-examples/issues/50
Shell
33
star
84

unified-instantsearch-ecommerce

The fastest way to implement Algolia, for e-commerce customers.
JavaScript
32
star
85

talksearch-scraper

Extract captions and metadata from YouTube playlists and push them to Algolia
JavaScript
31
star
86

diffable-html

Opinionated HTML formatter focused towards making HTML diffs readable.
JavaScript
30
star
87

algoliasearch-client-java-legacy

*DEPRECATED* Algolia Search API Client for Java, see https://github.com/algolia/algoliasearch-client-java-2
Java
30
star
88

api-clients-automation

๐Ÿค– Auto-generated Algolia API clients, specs and tests with โค๏ธ
PHP
30
star
89

recommend

A UI library for Algolia Recommend, available for Vanilla JavaScript and React.
TypeScript
28
star
90

eslint-config-algolia

Algolia's ESLint config and prettier instructions for JavaScript projects
JavaScript
27
star
91

talksearch

๐ŸŽค An interactive search experience for video titles and transcripts
JavaScript
25
star
92

algolia-firebase-nodejs

An example showing how to push data from Firebase to Algolia
JavaScript
24
star
93

algoliasearch-client-scala

โšก๏ธ A fully-featured and blazing-fast Scala API client to interact with Algolia.
Scala
24
star
94

redux-magic-async-middleware

redux-magic-async-middleware is a middleware which makes it easy to handle asynchronous data with redux
JavaScript
23
star
95

laravel-scout-settings

DEPRECATED: Use of this repository is deprecated. Please use Scout Extended - https://github.com/algolia/scout-extended instead.
PHP
23
star
96

pdrone

Control Parrot drones with JavaScript
JavaScript
23
star
97

algolia-swift-demo

iOS instant search tutorial
Swift
23
star
98

algolia-react-boilerplate

๐Ÿ”ฅ A highly scalable, and customizable boilerplate, made with ReactInstantSearchHooks and with many Algolia's features. Ready to configure and deploy. You have just to follow steps in readme file. ๐Ÿ’ฅ
JavaScript
23
star
99

algolia-coding-contest

Welcome to the first Algolia Coding Contest, until May 5th.
22
star
100

algoliasearch-django-example

Python
22
star