Create search bar on landing page

[rsyoh-97]

• [ ] load JSON or csv of all county names using JavaScript
• [ ] create search
• [ ] if fail to create search, create a collapsible menu

[miguelito34]

Notes from discussion with Serdar on 5/5:

• May want to trigger an update every 1 second or 500ms. Or on a click, as opposed to continuously updating the search results. We can look into debouncing and "setting a timeout" via eloquent javascript.
• For the search javascript script, may want to consider in the future moving the JS to a separate file and loading it at the top with the "defer" keyword to ensure that it runs after the DOM has been loaded.

[rsyoh-97]

Notes from Serdar's Slack (5.6.2021)

• Will need to attach an event handler and creating a function to handle the event. The function is where you’d instantiate Fuse and perform the search, and render dropdown menu items.

• Focus on (1) displaying the results when a user is typing as a dropdown menu (2) inserting the text of the selected menu item into the input box. After that is done, we can think through the workflow for how to take the user to the desired page. A super basic v1 could be a Submit button as part of a traditional form, which sends the user to a new page. A nice-to-have UI improvement would be to send the user to the page automatically upon selection of an item from the dropdown menu.

[miguelito34]

Something that came to mind, we likely only want to show/search through counties for which we actually have the data. Ideally, we can cover all counties across the US, but we'll need to decide (if it even comes up), how to handle counties for which we're missing some or all of the data.

[zstumgoren]

@miguelito34 That's a very good point about the display of counties in search. I could see handling this in one of two ways:

1. As part of the preprocessing pipeline, only include counties for which you have data in the JSON file that feeds Fuse or QuickSearch (can't recall which one you settled on)
2. Include all counties in the dropdown menu/search, but counties that are not supported should be styled visually so as to indicate that they're not available. For example, you could use a lighter gray font for "inactive" counties. You may need some additional annotation beyond that to ensure clarity.

Approach 1 has the downside that users may find it confusing if they can't find their county. You could alleviate this with a note somewhere in the UI that explains that not all counties are yet supported. Alternative 2 avoids this confusion but will require some very clear visual indicator (and possibly textual explanation) that greyed out counties are not yet supported.

Either approach is acceptable, though personally I'd lean towards stategy 2.