GithubHelp home page GithubHelp logo

isabella232 / instant-search-demo Goto Github PK

View Code? Open in Web Editor NEW

This project forked from algolia/instant-search-demo

0.0 0.0 0.0 33.48 MB

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

Home Page: https://preview.algolia.com/instantsearch

License: MIT License

Ruby 6.57% CSS 37.13% HTML 24.84% JavaScript 31.46%

instant-search-demo's Introduction

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.

instant-search-demo's People

Contributors

agdavid avatar bobylito avatar dandv avatar dud225 avatar dustincoates avatar haroenv avatar julienpa avatar kikobeats avatar kokliko avatar pixelastic avatar redox avatar reinaris avatar renovate-bot avatar seafoox avatar shipow avatar vvo avatar zasmail avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.