fuzzy-search-input's Introduction

Fuzzy Search input

This input fuzzy search or autocompletes search results. The data comes from JSON file of fruits in this repo src/constants/fruits.JSON

Screenshots

Steps to run

`yarn` or `npm install`

Download dependencies

`yarn start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

`yarn test`

To run unit tests

Criteria

Functional requirements:

It must be built in React; feel free to use a styling solution of your choice
Upon typing, the widget fuzzy-matches case-insensitively against the list at the end of this document and presents list items that contain the matched characters as suggestions
Clicking an autocomplete suggestion should fill in the input with the full text
Using the up and down arrow keys should allow the user to highlight a desired suggestion and press Enter to select it, filling in the input
The input should be a valid HTML text input element to be used in a standard HTML form setup
The user should be able to proceed without choosing one of the suggestions (non-exclusive)

Styling requirements:

The widget match suggestions should appear below the text input as a floating container
The floating suggestion area should become scrollable when there are many suggestions
The matched portion of the suggestion should be highlighted in some way

Misc comments

this is the result of developing a fuzzy search input in a 3 hour code sprint. If I had more time I would have made more integration tests to assert the flow of keypress and UI validation, as well as give the styling some more TLC to really make it ✨sparkle✨. I decided to use useEventListener hook as dependable interface handle key events.

Recommend Projects