https://github.com/noob0799/multisearch

A webapp built using React to demonstrate multi-select search functionality
https://github.com/noob0799/multisearch

css3 html-css-javascript html5 javascript react

Last synced: 5 days ago
JSON representation

A webapp built using React to demonstrate multi-select search functionality

• Host: GitHub
• URL: https://github.com/noob0799/multisearch
• Owner: Noob0799
• Created: 2024-10-20T16:09:51.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-10-20T19:28:03.000Z (4 months ago)
• Last Synced: 2024-10-20T23:58:17.887Z (4 months ago)
• Topics: css3, html-css-javascript, html5, javascript, react
• Language: JavaScript
• Homepage: https://noob-multi-search.netlify.app/
• Size: 171 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Multi Select Search

A webapp built using React to demonstrate multi-select search functionality  

Link to live web app server: https://noob-multi-search.netlify.app/  

Features:  

- Auto suggestion on typing in the search bar

- Keyboard navigation on list of auto suggestions using Arrow Up, Arrow Down and Enter buttons

- All options selected from the list of auto suggestions using Enter key or mouse click will be shown in the search bar

- Such selected options can be removed by Backspace or by clicking on the options displayed in the search bar

## Initial Screen

![image](https://github.com/user-attachments/assets/fde56bcd-791f-4db2-a245-4a25bffbeca2)

## Screen showing auto suggestions on typing in the search bar

![image](https://github.com/user-attachments/assets/26eb2e05-c5f5-4c88-ac27-d3ba535ea1e3)

## Screen showing already selected search suggestions in the search bar

![image](https://github.com/user-attachments/assets/f7cb9659-f97f-4568-a3ce-5ad37fb02ca7)