Enable algolia query suggestion everywhere

[grace0925]

https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/query-suggestions/tutorials/building-query-suggestions-ui/react/

Integrate the AutoComplete Component into the existing Search component.

[grace0925]

Currently, the src/components/AutoComplete component detect key press on enter and triggers the onSuggestionSelected prop.

   onKeyPress = (event) => {
        if (event.key === "Enter") {
            event.preventDefault();
            if (this.state.algoliaPowered) {
                this.props.onSuggestionSelected(event, {suggestion: { query: this.state.value}});
            } else {
               this.onSuggestionSelected(event, {suggestionValue: event.target.value, method: 'click'});
            }
        }
    };

This works fine for the search box in src/scenes/LandingPage/Banner since it doesn't use an algolia powered search box.

In the src/scenes/Search/Search component, prior to this PR, the <SearchBox /> detects key press on 'enter' and completes the search from there. In addition, the searchbox was wrapped in a controlled search(manipulates the search state) with a function handleSearchStateChange that's called on every change in search state.

      <InstantSearch searchClient={searchClient}
                     indexName={scholarshipIndex}
                     searchState={searchState}
                     onSearchStateChange={handleSearchStateChange}
                     createURL={createURL}>

Since the SearchBox is removed in favour of a VirtualSearchBox to accommodate autocomplete, a key press on enter triggers the onSuggestionSelected function instead and I don't see handleSearchStateChange being called consistently. It seems to be searching the db just fine but this causes the url slug not being updated on a search.