Feature: search suggestions for search and quick launch

[Flo2410]

Proposed change

This PR adds search suggestions to the quick launch menu.
Currently, only the top four suggestions are shown, but it could be made adjustable in the config. I just wasn't sure where to put the setting. To the quick launch setting or the search widget?

Screenshot

Config

I added an option to the quicklaunch setting called hideSearchSuggestions which hides the suggestions.
Furthermore, I added the option suggestionUrl to the custom search widget.
This allows the user to set a custom URL for suggestions, like this:

- search:
    provider: custom
    url: https://www.ecosia.org/search?q=
    suggestionUrl: https://ac.ecosia.org/autocomplete?type=list&q=
    target: _blank

The body of the response from the API configured with suggestionUrl should have the following format:

[
  "home",
  [
    "home depot",
    "home depot near me",
    "home equity loan",
    "homeworkify",
    "homedepot.com",
    "homebase login",
    "home depot credit card",
    "home goods"
  ]
]

The first entry of the array contains the search query, the second one is an array of the suggestions.
In the example above, the search query was home.

The above example is also included in the change to the docs.

I found suggestion URLs for all implemented search providers and Ecosia which I used as an example for the custom provider.

Relates to #1225 and #1517

Type of change

• New service widget
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Documentation only
• Other (please explain)

Checklist:

• If applicable, I have added corresponding documentation changes.
• If applicable, I have reviewed the feature and / or service widget guidelines.
• I have checked that all code style checks pass using pre-commit hooks and linting checks.
• If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.

[shamoon]

Thanks. I can take a look at the PR later but this should be opt-in not opt-out, otherwise we’re going to get a lot of complaints about this showing up out of nowhere.

in that case presumably the variable should be renamed to show…

Also FYI our guidelines now require 10 up-votes for new features but I realize the docs don’t show that for the latest version yet

[shamoon]

It's also a bit odd that this works only for quick launch but comes from search. I think it should be implemented for both so they mirror each other. We'll need to make sure the UI for the search one is good.

[Flo2410]

Regrading the search in the search bar:

I made a quick implementation using the Combobox from headlessui.
It obviously still needs some work, but I would like some guidance regarding the design of the dropdown.

Furthermore, I would suggest moving the settings for the search provider, including the showSearchSuggestions setting, into a provider in the future. This probably would also enable the search function in the quick launch to work without having the search widget enabled. But this most likely falls out of the scope of this PR.

[shamoon]

Thanks for changes.

Yea the search widget auto-complete is a good start. As far as the design, it'd be easier if you push those changes and I can play with it, if youre OK with that.

And yea, maybe it seems overkill but users generally want more control especially as this is sending data (and getting tracked, of course) so I would include a setting for the widget (showSuggestions) in addition to the quick launch one. And I think something even better would be what we've done similarly elsewhere which is to let the search widget one act as the 'default' for quick launch (in other words if you set search widget showSuggestions to true, the quick launch will do the same unless you explicitly set it to false). If you only want them in quick launch set it just in quick launch. That feels 'clean' and means a lot of users will only need to set it in one place (if you want suggestions in search widget theres a good chance you do in QL).

[Flo2410]

I pushed the draft for the suggestions in the search bar.
You can activate them by adding showSearchSuggestions: true to the search widget config.

[Flo2410]

I think we are good here.
The only thing that bothers me is that the Google API doesn't return UTF-8 strings.

[Flo2410]

I couldn't live with it. Looks like Google only returns UTF-8 if the User Agent includes Mozilla/5.0.

[Flo2410]

While writing the response above, I found some more bugs:

The first one is the Z-Index of the quick launch not being high enough:

The second one are unexpected line breaks because of the span elements for the suggestions.

The window width was 620px for the second screenshot.

[shamoon]

Thanks great catches! Should be fixed and I reverted the UA thing. Agree we can address in the future if needed, you ok with that?

[Flo2410]

I found another bug, I didn't URI encode the query again in the API route. This made it so that special characters were not correctly sent to the search suggestions API.

But apart from that, I think we are fine.

The thing with the Umlaut for Google doesn't bother me too much (I use DuckDuckGo anyway ;) )

While testing the Umlaut thing, I found another bug, but I will open an issue for that one.

Edit: Okay, I can't open an issue. How do I report a Bug? Or should I just open an PR?

[shamoon]

How do I report a Bug?

You can open a discussion about it.

[shamoon]

Great work

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details.