This is a sample project implementing a dropdown search (triggered by the @
character) directly inside a textarea using Algolia.
You can try the live demos or follow the guide to build your own.
- A
@mentionfeature where users can reference people, places, resources, ... - A Twitter-like hashtag feature
- An 'Advanced search UI', with dynamic refinements: see Abacus blogpost
We build 4 variations on the same principle, with increasing complexity. Feel free to have a look at the code or read the guide to see how to build your own.
| Basic autocomplete (source code) | With picture (source code) |
|---|---|
 |
 |
| Rich HTML textarea (source code) | With picture (source code) |
|---|---|
 |
 |
The dataset is coming from themoviedb.org and contains the list of the 500 more popular actors.
The demo website can be deployed on GitHub pages by running npm run deploy.