https://github.com/emanuelefavero/react-autocomplete

This is a simple React Autocomplete component that uses a Trie data structure to store the list of words
https://github.com/emanuelefavero/react-autocomplete

autocomplete data-structures react trie vite

Last synced: about 1 year ago
JSON representation

This is a simple React Autocomplete component that uses a Trie data structure to store the list of words

• Host: GitHub
• URL: https://github.com/emanuelefavero/react-autocomplete
• Owner: emanuelefavero
• License: mit
• Created: 2023-07-15T00:53:19.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-15T01:21:40.000Z (over 2 years ago)
• Last Synced: 2025-02-04T16:50:27.571Z (about 1 year ago)
• Topics: autocomplete, data-structures, react, trie, vite
• Language: JavaScript
• Homepage: https://react-autocomplete-two.vercel.app
• Size: 42 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# React Autocomplete with Trie Data Structure

This is a simple React Autocomplete component that uses a Trie data structure to store the list of words. The Trie data structure is a tree that stores words by their prefix. This allows for fast lookups of words that start with a given prefix. The Trie data structure is often used with these sorts of string related features like autocomplete, spell check, and IP routing

> Note: This is a simple feature example website. The style is not the focus of this project

## Demo

- [https://react-autocomplete-two.vercel.app](https://react-autocomplete-two.vercel.app)

### Screenshot

![screenshot](./screenshot.webp 'screenshot')

## Installation

- Clone the repo and run `npm install` to install the dependencies

- Run `npm run dev` to start the development server

- Go to `http://localhost:5173` to view the application

## Usage

- Start typing in the input field to see the autocomplete suggestions

- If you type a word that is in the suggestion list, that word will be shown and the other suggestions will be filtered out

- You can add a new word to the suggestion list by typing it in the input field and pressing the enter key or clicking the "Add Word" button

> Note: This is only a front-end application. The data is not persisted anywhere so if you refresh the page, the list of suggestions will be reset to the default list.

## License

- [MIT](LICENSE.md)