Problem Statment:
You have to make a search input box which will
search over a list of users.
The user object has the following fields
id: a unique id
name: user’s name
items: list of items ordered by user
address: address of the user
pincode: user address pin code
You have to implement search on all of the fields.
The search results will show up as a list of User
Cards. Refer to the screenshots for how the UI
would look like
-
Placeholder (empty input)
-
Search Result List
3. No Results Card
-
On typing in the search input box, the search
results list opens up. The search could be
just a string matching search.
-
The list of cards can be navigated through
keyboard or mouse
-
-
only one card should highlight at a time
if both mouse and keyboard are used for
navigation
-
(keyboard will take preference if mouse is
kept hovered on the list, similarly mouse
will take preference if keyboard
navigation is not used).
-
This behaviour is similar to how youtube
search works
-
When no search results are found, an empty
card is displayed
-
The card list would be scrollable
-
The highlighted card (via keyboard/mouse) will
scroll into view
You can find the mock data here
-
Modularity of code
-
Handling of Keyboard navigation with mouse.
-
Handling ScrollIntoView
You are free to use any framework for the webapp.
1. No jQuery.
2. No need for fancy CSS - We know you can do it
if you can code this stuff. (But the
card structure).
3. To submit the solution, please upload the
entire folder on Google Drive / Dropbox, share the
folder as 'anybody with link can view'
& then reply back with the link to this email.
5. The assignment can be done using plain JS, or
any frameworks such as AngularJS, ReactJS.
6.
Do not use a library for handling
ScrollIntoView.