Frontend Assignment 3: Autocomplete input

frontend-assignment-autocomplete.md

Autocomplete input

Implement the input above in React and CSS.

1. Users should be able to search by typing into the search field. Search requests should be sent once every 300ms seconds while the user is typing.
2. When a new character is entered old requests should be discarded.
3. The search returns objects of two types: photos (videos) and live events.
4. Search results should be displayed in a container below the input grouped by their type.

Consider the following API endpoint is available:

URL: https://twentythree.net/api/videos?search=<searchTerm>
Returns: [{
    "key": "live:4722995",
    "object_id": "4722995",
    "object_type": "live",
    "title": "People rule",
    "label": "People rule",
    "selected_p": 0,
    "token": "1c777feasdfas43b17e",
    "url": "/live-event-1"
  },
  {
    "key": "photo:4760910",
    "object_id": "4760910",
    "object_type": "photo",
    "title": "People are cool",
    "label": "People are cool",
    "selected_p": 0,
    "token": "66b14c343asdfaew0740f6f01",
    "url": "/people-are-cool"
  },
  {
    "key": "photo:4759946",
    "object_id": "4759946",
    "object_type": "photo",
    "title": "We love people",
    "label": "Video",
    "selected_p": 0,
    "token": "67b59f35fb95fasd4c6ce45047f8",
    "url": "/we-love-people"
  },
  {
    "key": "live:4737881",
    "object_id": "4737881",
    "object_type": "live",
    "title": "People event",
    "label": "People event",
    "selected_p": 0,
    "token": "70766696easdasbae",
    "url": "/people-event"
  }]

Hint: Lodash/UnderscoreJS can be used.