๐Ÿ”ฎ Fast and full-featured autocomplete library

Overview
Autocomplete

Autocomplete

A JavaScript library that lets you quickly build autocomplete experiences

Version MIT License

๐Ÿšง Autocomplete v1 is in an alpha phase and early feedback is welcome.

If you're looking for Autocomplete v0, which has been the production-ready version for the last years, head over to the master branch.

All you need to get started is:

  • A container to inject the experience into
  • Data to fill the autocomplete with
  • Any Virtual DOM solution (JavaScript, Preact, React, Vue, etc.)

The data that populates the autocomplete results are called sources. You can use whatever you want in your sources: a static set of searches terms, search results from an external source like an Algolia index, recent searches, and more.

By configuring just those two required parameters (container and getSources) you can have an interactive autocomplete experience. The library creates an input and provides the interactivity and accessibility attributes, but you're in full control of the DOM elements to output.

Screenshot

Documentation โ€ข API โ€ข Playground

Installation

The recommended way to get started is with the autocomplete-js package. It includes everything you need to render a JavaScript autocomplete experience.

Otherwise, you can install the autocomplete-core package if you want to build a renderer from scratch.

All Autocomplete packages are available on the npm registry.

yarn add @algolia/autocomplete-js@alpha
# or
npm install @algolia/autocomplete-js@alpha

If you don't want to use a package manager, you can use a standalone endpoint:

<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js@alpha"></script>

Usage

To get started, you need a container for your autocomplete to go in. If you don't have one already, you can insert one into your markup:

<div id="autocomplete"></div>

Then, insert your autocomplete into it by calling the autocomplete function and providing the container. It can be a CSS selector or an Element.

Make sure to provide a container (e.g., a div), not an input. Autocomplete generates a fully accessible search box for you.

import { autocomplete } from '@algolia/autocomplete-js';

autocomplete({
  container: '#autocomplete',
  // ...
});

Continue reading our Getting Started guide.

Documentation

The documentation offers a few ways to learn about the Autocomplete library:

  • Read the Core Concepts to learn more about underlying principles, like Sources and State.
  • Follow the Guides to understand how to build common UX patterns.
  • Refer to API reference for a comprehensive list of parameters and options.
  • Try out the Playground where you can fork a basic implementation and play around.

You can find more on the documentation.

Support

Packages

Package Description Documentation
autocomplete-core Core primitives to build an Autocomplete experience Documentation
autocomplete-js JavaScript package for Autocomplete Documentation
autocomplete-plugin-recent-searches A plugin to add recent searches to Algolia Autocomplete Documentation
autocomplete-plugin-query-suggestions A plugin to add query suggestions to Algolia Autocomplete Documentation
autocomplete-plugin-algolia-insights A plugin to add Algolia Insights to Algolia Autocomplete Documentation
autocomplete-preset-algolia Presets to use Algolia features with Autocomplete Documentation
autocomplete-theme-classic Classic theme for Autocomplete Documentation

Showcase

See the awesome experiences people built with Autocomplete:

DocSearch Algolia Documentation

Sandboxes

Check out sandboxes using Autocomplete:

E-commerce React renderer
E-commerce React renderer
Recent Searches Query Suggestions Algolia Index Algolia Insights Preact Algolia Index React

You can find more sandboxes on CodeSandbox.

License

MIT

Comments
  • Random erasing of search query on Chrome 92 Android

    Random erasing of search query on Chrome 92 Android

    Description

    When running on Android Chrome 92, I get weird behavior. When I enter a search string, everything works fine until I hit a certain letter. Then everything in the search field is removed.

    It varies which letter causes the glitch. Check out the video below for an example:

    https://www.youtube.com/watch?v=rYf5dsW5KKQ

    I am using the following versions:

    "@algolia/autocomplete-js": "^1.3.0",
    "@algolia/autocomplete-plugin-algolia-insights": "^1.3.0",
    "@algolia/autocomplete-plugin-query-suggestions": "^1.3.0",
    "@algolia/autocomplete-plugin-recent-searches": "^1.3.0",
    "@algolia/autocomplete-theme-classic": "^1.3.0",
    "algoliasearch": "^4.10.5",
    "algoliasearch-helper": "^3.5.5",
    "htm": "^3.1.0",
    "instantsearch.css": "^7.4.5",
    "instantsearch.js": "^4.28.0",
    

    Example (as shown in the video): I enter "se" in the search field. As soon as I enter "k", "se" is removed and "k" is the only thing appearing in the search field.

    When I inspect the state-object with the onStateChange event of Autocomplete, I find the the prevState does contain the first letters while the current state only contains the new letter.

    I am actually seeing the same behavior in this official autocomplete-js example: https://l7tzs.csb.app/ (which is linked from the "See live demo" button on the page https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/autocomplete/js/

    Here is a video where I demonstrate the bug on this specific sandbox example: https://youtu.be/rSbl26XJ828

    Also asked about this on the community forum: https://discourse.algolia.com/t/possible-bug-on-chrome-android-erases-everything-in-input/13346

    Environment

    • OS: Android
    • Browser: Chrome 92
    • Autocomplete version: 1.3.0
    Type: Bug 
    opened by nitech 28
  • Autoselect on blur

    Autoselect on blur

    When using the autoselect: true, it indicates that it's selecting the first suggestion, what I saw that on mobile (iOS, Safari) clicking done doesn't trigger the "Enter" event so it's doesn't select it. In android I noticed that after you see the indication that it's selected users just switch to next input.

    So I really needed a way to select it on blur, I've created new option "autoselectOnBlur" very simple, could I push this as a PR? Will be nice to keep it in the code base if it's useful for others as well and easier to maintain version updates for me.

    Type: Enhancement help wanted 
    opened by voidale 23
  • Prevent source triggering via dropdown update on Up/Down key presses.

    Prevent source triggering via dropdown update on Up/Down key presses.

    Summary

    Currently autocomplete.js triggers the data source function when input is not empty and up/down arrow keys are pressed. A quick demo of the issue can be found at http://jsbin.com/poyofu/edit?html,js,console,output.

    Result

    Unless the input changes, arrow keys should not trigger redundant requests.

    Related to #169

    Status: DO NOT MERGE 
    opened by SokratisVidros 21
  • Add autoWidth option

    Add autoWidth option

    Summary In my specific case i am developing an autocomplete with an dropdown with max-width in the css style. However the typeahead does not allow me to control the css width property so i had to put an option to control this.

    After implemented this options i set autoWidth: false and the result with max-width: 500px is:

    captura de tela 2017-02-24 as 11 06 32

    With autoWidth: true !default:

    captura de tela 2017-02-24 as 11 19 58 copia

    Result

    Now it's possible to have a width control by the css.

    opened by negherbon 20
  • autocomplete=

    autocomplete="off" does not work in chrome

    See https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

    Expected behaviour: chrome native autocomplete is not drawn on top of autocomplete.js autocomplete.

    Workaround (either):

    • use autocomplete="new-password"
    • insert input <input style="opacity: 0; position: absolute" /> right before your autocompleted input
    hacktoberfest 
    opened by sdwvit 18
  • Open a suggestion in a new tab

    Open a suggestion in a new tab

    I'd like users to be able to open suggestions in a new tab. I was looking to implement something like this to detect if the intention was to open the link in a new window. Unfortunately we have no context about the original event that triggered the "autocomplete:selected" event.

    I guess this leaves us we the only alternative to display all suggestions as native links.

    opened by rayrutjes 18
  • feat(appendTo): new parameter

    feat(appendTo): new parameter

    Summary

    See #135 New parameter: appendToBody. Allows to not wrap the input in .algolia-autocomplete.

    Automatically repositions itself on resize. Limitation: requires hint: false. Indeed, we're not wrapping the input anymore, so we can't have it behind the input.

    Result Without much surprise, it looks the same way: Autocomplete with appendToBody

    However, on the playground, it ends up "breaking" the example in playground.html. But this is actually expected based on the bootstrap layout we're using, it's supposed to fail.

    <div class="input-group">
      <input class="form-control" />
      <input class="form-control" />
      <span class="input-group-addon">Go</span>
    </div>
    

    image

    opened by Jerska 18
  • Attach the dropdown to the document

    Attach the dropdown to the document

    Very often, there are websites which are wrapping search inputs into containers containing the overflow: hidden rule, resulting in the following. image

    I think we should try to attach the dropdown to the document and position it with javascript.

    This would also resolve the case where the input width is to small to provide a good user experience. image

    What will be tricky though is to detect if the dropdown has to align left/right and be displayed underneath or above the input.

    To finish, this will also allow us to not suffer from the css of the search input container. Often in the header or the side menu, CSS rules are very intrusive... image

    Type: Enhancement Resolution: Supported in v1 
    opened by rayrutjes 18
  • Aria Roles - Screen Reader support

    Aria Roles - Screen Reader support

    Adding aria roles where necessary would make search suggestions readable by screen readers.

    I am not an expert in this field but @ova2 put a Pull Request together a long time ago at https://github.com/twitter/typeahead.js/pull/995 that added some pretty good screen reader support, in case that can be of help.

    I've tested with VoiceOver on MacOS: using up/down keys to navigate through suggestions doesn't read anything out, making search on our site virtually unusable for screen reader users.

    Type: Enhancement help wanted 
    opened by kaelig 18
  • docs: write

    docs: write "what is autocomplete"?

    This PR writes the first introduction page, "What is autocomplete".

    It describes:

    1. what an autocomplete experience is, in general,
    2. what this library does and doesn't provide.

    I feel like the second part is still a bit weak and could use some more technical details, so please suggest any you see missing. Thanks!

    opened by Meschreiber 17
  • feat(clearOnSelected): allow users to clear the input instead of filling

    feat(clearOnSelected): allow users to clear the input instead of filling

    In some use-cases, like when you're using autocomplete to make tags on a page, or using the output in any other way than prefilling the query, you don't want the suggested value to show in the input, but would rather like it to be empty.

    Before this PR it was basically impossible to have your input not filled, since it came back on blur and a few different places (see resetInputValue)

    fixes #241

    now there's a new option:

    autocomplete('#input', { clearOnSelected: true }, /* ... */)
    

    This makes sure the input clears after selecting, rather dan filling

    opened by Haroenv 17
  • build(deps): update minor Preact dependencies

    build(deps): update minor Preact dependencies

    We have a lot of Renovate PRs open and this is becoming difficult to merge since every PR must be up to date with the base branch.

    This PR attempts at updating minor Preact dependencies (aside from the autocomplete-js one which stays with ^10) with low risk of breakage, so we can auto close a bunch of Renovate PRs. Later we'll also need to figure out how to make our Renovate setup work (or change it).

    I'm doing multiple PRs for minor dependencies because doing them all fails and it's hard to pinpoint what the problem is.

    opened by sarahdayan 1
  • build(deps): update minor Core JS dependencies

    build(deps): update minor Core JS dependencies

    We have a lot of Renovate PRs open and this is becoming difficult to merge since every PR must be up to date with the base branch.

    This PR attempts at updating minor Core JS dependencies with low risk of breakage, so we can auto close a bunch of Renovate PRs. Later we'll also need to figure out how to make our Renovate setup work (or change it).

    I'm doing multiple PRs for minor dependencies because doing them all fails and it's hard to pinpoint what the problem is.

    opened by sarahdayan 1
  • build(deps): update minor React dependencies

    build(deps): update minor React dependencies

    We have a lot of Renovate PRs open and this is becoming difficult to merge since every PR must be up to date with the base branch.

    This PR attempts at updating minor React dependencies with low risk of breakage, so we can auto close a bunch of Renovate PRs. Later we'll also need to figure out how to make our Renovate setup work (or change it).

    I'm doing multiple PRs for minor dependencies because doing them all fails and it's hard to pinpoint what the problem is.

    opened by sarahdayan 1
  • build(deps): update minor linting dependencies

    build(deps): update minor linting dependencies

    We have a lot of Renovate PRs open and this is becoming difficult to merge since every PR must be up to date with the base branch.

    This PR attempts at updating minor linting dependencies (ESLint, Prettier) with low risk of breakage, so we can auto close a bunch of Renovate PRs. Later we'll also need to figure out how to make our Renovate setup work (or change it).

    This PR also includes file changes because somehow Prettier made breaking changes.

    I'm doing multiple PRs for minor dependencies because doing them all fails and it's hard to pinpoint what the problem is.

    opened by sarahdayan 2
  • LocalStorageRecentSearchesPlugin not working with other hooks than onSubmit

    LocalStorageRecentSearchesPlugin not working with other hooks than onSubmit

    Description

    You canโ€™t use LocalStorageRecentSearchesPlugin with autocomplete option defaultActiveItemId (e.g. defaultActiveItemId: 0), because onSubmit lifecycle hook is not fired by autocomplete in this case. LocalStorageRecentSearchesPlugin is based on this hook. It would be good to have the choice, which lifecycle hooks trigger the plugin. In practice also onSelect is needed, but itโ€™s currently only for querySuggestionsPlugin implemented: https://github.com/algolia/autocomplete/blob/dc8b6f2b585d0992bcb22d2c61053388c1c90590/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts#L57

    PS: It's unclear, whether incompatibility with defaultActiveItemId is intended behavior or a bug. At least it's very confusing and not mentioned anywhere in the docs.

    Expected behavior

    LocalStorageRecentSearchesPlugin should handle onSubmit and onSelect hook. At least, it should be mentioned in the docs, if it's not possible.

    Environment

    • Autocomplete version: 1.7.1
    opened by vrilcode 1
Releases(v1.7.4)
Owner
Algolia
Open source tools for building search. Learn more at community.algolia.com
Algolia
typeahead.js is a fast and fully-featured autocomplete library

typeahead.js Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundat

Twitter 16.5k Dec 31, 2022
Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Grzegorz Tomicki 58 Dec 24, 2022
Simple autocomplete pure vanilla Javascript library.

autoComplete.js โœจ Simple autocomplete pure vanilla Javascript library. ?? Live Demo v8.3 autoComplete.js is a simple pure vanilla Javascript library t

Tarek 3.7k Dec 31, 2022
A platformer game using Phaser3 library and Vanilla JS. This project features the knowledge of Webpack, ES6, JS Modules, Async code, DOM, JSON and Jest tests.

RUNNING BUNNY A platformer game using Phaser3 library and Vanilla JS. This project features the knowledge of Webpack, ES6, JS Modules, Async code, DOM

Ana Paula Hรผbner 27 Mar 29, 2022
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Select2 Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results. To get started, ch

Select2 25.5k Jan 1, 2023
This project was developed to practice Front-end and Back-end comunication, data formatting, http requests GET, POST, DELETE, form validation, it also consumes a rest API

React Application ?? Demonstration of the application | Features | Technologies used | Application installation ?? Demonstration of the application Ap

Victor Lira 36 May 17, 2022
๐Ÿ”ฎ Fast and full-featured autocomplete library

A JavaScript library that lets you quickly build autocomplete experiences All you need to get started is: A container to inject the experience into Da

Algolia 2.3k Jan 1, 2023
typeahead.js is a fast and fully-featured autocomplete library

typeahead.js Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundat

Twitter 16.5k Dec 31, 2022
typeahead.js is a fast and fully-featured autocomplete library

typeahead.js Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundat

Twitter 16.5k Jan 4, 2023
ApostropheCMS is a full-featured, open-source CMS built with Node.js that seeks to empower organizations by combining in-context editing and headless architecture in a full-stack JS environment.

ApostropheCMS ApostropheCMS is a full-featured, open source CMS built with Node.js that seeks to empower organizations by combining in-context editing

Apostrophe Technologies 3.9k Jan 4, 2023
ApostropheCMS is a full-featured, open-source CMS built with Node.js that seeks to empower organizations by combining in-context editing and headless architecture in a full-stack JS environment.

ApostropheCMS ApostropheCMS is a full-featured, open source CMS built with Node.js that seeks to empower organizations by combining in-context editing

Apostrophe Technologies 3.9k Jan 4, 2023
Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Grzegorz Tomicki 58 Dec 24, 2022
:bird: :zap: Bluebird is a full featured promise library with unmatched performance.

Got a question? Join us on stackoverflow, the mailing list or chat on IRC Introduction Bluebird is a fully featured promise library with focus on inno

Petka Antonov 20.2k Jan 5, 2023
:bird: :zap: Bluebird is a full featured promise library with unmatched performance.

Got a question? Join us on stackoverflow, the mailing list or chat on IRC Introduction Bluebird is a fully featured promise library with focus on inno

Petka Antonov 20.2k Dec 31, 2022
A full-featured Solana Metaplex Candymachine client-side library in Typescript

Candymachine Client SDK A full-featured Solana Metaplex Candymachine client-side library in Typescript Disclaimer: The SDK is currently a pre-alpha ve

Boxfish Studio 36 Nov 10, 2022
๐Ÿž๐ŸŽจ Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. Packages toast-ui.image-editor - Plain JavaScript compo

NHN 5.7k Jan 6, 2023