Search with autocomplete

autocomplete-docs.md

                _                                  _      _          _____                     _     _                
     /\        | |                                | |    | |        / ____|                   | |   | |               
    /  \  _   _| |_ ___   ___ ___  _ __ ___  _ __ | | ___| |_ ___  | (___   ___  __ _ _ __ ___| |__ | |__   __ _ _ __ 
   / /\ \| | | | __/ _ \ / __/ _ \| '_ ` _ \| '_ \| |/ _ \ __/ _ \  \___ \ / _ \/ _` | '__/ __| '_ \| '_ \ / _` | '__|
  / ____ \ |_| | || (_) | (_| (_) | | | | | | |_) | |  __/ ||  __/  ____) |  __/ (_| | | | (__| | | | |_) | (_| | |   
 /_/    \_\__,_|\__\___/ \___\___/|_| |_| |_| .__/|_|\___|\__\___| |_____/ \___|\__,_|_|  \___|_| |_|_.__/ \__,_|_|   
                                            | |                                                                       
                                            |_|                                                                     

Assumption:

Only search English titles; assume that English shows option is clicked

Features needed:

Call to API

Make sure that search terms are appended to the URL request

Cleaning Data

I noticed that the API request does a fuzzy search and checks for the search term regardless of the language of the title. While this allows for a more wide spread search, it can be a little confusing to provide titles of movies that do not have matching characters to the search term. Also considering my assumption of only checking english titles, I want to limit the returned titles to english only.

Autocompleting the search bar

This seemed fairly straight forward, but I realised that there were many interactions that would cause the search box to autocomplete; these include, pressing the right arrow key, pressing enter and clicking the search item.

Mouse and key events

In a search box there are expected behaviors triggered by mouse events. A right arrow would be equivalent to selecting an option, enter selects an option and down and up navigates the list. Mousing over the list would mean selecting the various options, clicking would select it and mouse leave would close the list.

Roadblocks:

Mouse events

Key press, key down and key up all access the key event at various stages. Key down would have been most ideal as it catches the key event before the default behavior happens, which means 'event.preventDefault' would've worked. Doing that would however mean that event.target.value has not yet been extrapolated and I would have to calculate the value myself using the character code like so: String.fromCharCode(65)

Highlighting characters

This took me a while to figure out, since I had to work out the regex expression and input html tags to bolden the matching search terms.

With more time:

I decided that I would complete this assignment within a 2 week timeline, similar to an agile sprint. I gave myself goals to complete, the main one of which was to make a working iteration of the autocomplete searchbox. Given more time, I would have spent more time figuring out key press events and how I can prevent key up from its default behavior of moving to the beginning of the search box.

I would also work on refactoring a lot of my functions. Currently, there is some repetition in the code, especially in terms of selecting search boxes for each mouse and key press event. It would also be nice to modularize my code and split out the 'factory' functions from the actual implementation of the searchbox.

It would also have worked on making my functions a little more performant. There is a slight lag between typing in the search term and getting the formatted results back.