• Stars
    star
    140
  • Rank 261,473 (Top 6 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 10 years ago
  • Updated about 1 year 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
5,047
star
3

docsearch

📘 The easiest way to add search to your documentation.
TypeScript
3,980
star
4

instantsearch

⚡️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.
TypeScript
3,700
star
5

react-instantsearch

⚡️ Lightning-fast search for React and React Native applications, by Algolia.
TypeScript
1,969
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
854
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.
696
star
11

algoliasearch-client-php

⚡️ A fully-featured and blazing-fast PHP API client to interact with Algolia.
PHP
670
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
544
star
14

sup3rS3cretMes5age

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

react-element-to-jsx-string

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

hn-search

Hacker News Search
TypeScript
489
star
17

docsearch-configs

DocSearch - Configurations
JavaScript
455
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
360
star
22

docsearch-scraper

DocSearch - Scraper
Python
298
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
253
star
27

algoliasearch-laravel

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

jekyll-algolia

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

algoliasearch-client-swift

⚡️ A fully-featured and blazing-fast Swift API client to interact with Algolia.
Swift
203
star
30

algoliasearch-client-python

⚡️ A fully-featured and blazing-fast Python API client to interact with Algolia.
Python
194
star
31

algoliasearch-client-go

⚡️ A fully-featured and blazing-fast Go API client to interact with Algolia.
Go
193
star
32

search-bundle

Seamless integration of Algolia Search into your Symfony project.
PHP
190
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

pwa-ecom-ui-template

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

algoliasearch-django

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

algoliasearch-client-ruby

⚡️ A fully-featured and blazing-fast Ruby API client to interact with Algolia.
Ruby
166
star
41

algoliasearch-magento-2

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

instantsearch-android

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

npm-search

🗿 npm ↔️ Algolia replication tool ⛷️ 🐌 🛰️
TypeScript
134
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

firestore-algolia-search

TypeScript
112
star
47

kubernetes-hands-on

Kubernetes Hands-on by Algolia
110
star
48

frontman

💎 A Ruby-based static website generator
Ruby
108
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

search-insights.js

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

jest-serializer-html

Jest snapshot serializer that beautifies HTML.
JavaScript
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
44
star
68

chunk-text

🔪 chunk/split a string by length without cutting/truncating words.
JavaScript
44
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

algoliasearch-crawler-github-actions

Algolia Crawler Github action
TypeScript
40
star
73

demo-geo-search

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

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
75

algoliasearch-client-objc

Algolia Search API Client for iOS & OS X
Objective-C
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

algoliasearch-rails-example

AlgoliaSearch+Ruby on Rails examples
Ruby
36
star
79

elasticsearch-topk-plugin

Elasticsearch Top-K Aggregation Plugin
Java
35
star
80

wordpress-docker

Simple docker based environment for WordPress plugins and themes development.
Shell
34
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

algoliasearch-client-java-legacy

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

talksearch-scraper

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

diffable-html

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

api-clients-automation

🤖 Monorepo of the Algolia API specs and their auto-generated clients and documentation
PHP
30
star
89

recommend

A UI library for Algolia Recommend, available for Vanilla JavaScript and React.
TypeScript
29
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

algoliasearch-helper-flutter

⚡️ Building block to create instant-search applications with Flutter
Dart
23
star
98

algolia-swift-demo

iOS instant search tutorial
Swift
23
star
99

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
100

algolia-coding-contest

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