Add search hints/autocomplete

[tofumatt]

Add a search hint/autocomplete as per mocks. Relies on #3521.

[willdurand]

The API endpoint has been implemented in mozilla/addons-server#5930, and the API doc is here: https://addons-server.readthedocs.io/en/latest/topics/api/addons.html#autocomplete.

[willdurand]

I have started the UI based on the Sketch files. Things have slightly changed but I tried to stick to the original:

Open to view image

[willdurand]

@pwalm Hi, I am a bit confused by the new mockups. I have exported the latest version below:

What is the first set of entries/suggestions? In the previous mockups, it was about suggestions to help users type right, but now it seems to be different. At first glance, I thought this first set represented a history (previous/past searchs).

Yet, because there is also a second set with icons and arrows, I am not sure about what the first set actually is. If there is an arrow and the icon of a well identified add-on, then I would expect to redirect to the add-on page directly on click/tap, and not to fill the input and trigger the search process.

Could you please give more details about the autocomplete/auto-suggest feature? Thank you!

[kumar303]

I think the first set of menu items are suggestions for search terms and the second set are suggestions for search results.

However, the API only returns suggested search results so let's start by implementing that.

[willdurand]

Updating milestone.

[pwalm]

@kumar303 Is correct! First three: search terms. Second three: search results. I can actually make this clearer by adding subheads if we need to, we've done it for some other drop-downs in the header already:

[tofumatt]

@pwalm Yeah, I think the subheaders make it a lot clearer, and since we use them elsewhere in similar elements I say 👍

[kumar303]

@diox if you take a look at the mock in #10554 you'll see that the first three items are suggested search terms (not results). I assume that would be pretty tricky to implement in the API since we don't currently keep a record of what people typed (other than in request logs).

@pwalm could you add a little bit of rationale for including suggested terms? Would these potentially help users find what they're looking for in ways that suggested results would not?

[ValentinaPC]

Verified the fix from #3233 using FF55(Win 7, Android 7.2.1)
Search suggestions are displayed.
Postfix videos: