Welcome to the Autocomplete Chip Input project! This project provides a user-friendly input experience with the ability to select items from a dynamic list and turn them into chips. The project is implemented in React and TypeScript, ensuring a clean and maintainable codebase.
Check out the live demo: https://autocomplete-chip-input.netlify.app/
NOTE: The current demo does not support responsiveness. Please view it on a desktop or laptop for the best experience.
-
Autocomplete Input Field:
- Clicking on the input field triggers a dynamic list of items to appear.
- As you type, the list updates to show only items that match your input.
-
Chips:
- Clicking on an item in the list turns it into a chip displayed at the top of the input field.
- The input field adjusts automatically to accommodate the selected chips.
- Once an item becomes a chip, it is removed from the autocomplete list.
-
Chip Removal:
- Each chip has an "X" icon for removal.
- Clicking the "X" icon removes the chip and adds the corresponding item back to the autocomplete list.
-
Backspace Functionality:
- When the input field is blank and the user presses backspace, the last chip will be removed and moved to edit.
-
Keyboard Navigation
- Use the arrow keys (Up and Down) to navigate through the suggestion list.
- Press Enter to select the highlighted suggestion as a chip.
-
Clone the repository:
git clone https://github.com/kuttyhub/autocomplete-chip-input.git
-
Install dependencies:
cd autocomplete-chip-input npm install -
Build and run the project:
npm run dev
-
Open your browser and navigate to
http://localhost:5173/to view the application.