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)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Documentation only
• [ ] Other (please explain)

Checklist:

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

[shamoon]

Sorry I just noticed that the feature guidelines were in fact published before the PR was opened. In the interest of applying the rules equally (we get complaints otherwise) I’m going to close this but I’ll be more than happy to re-address when the requirement is met. I hope your understand, thank you for the PR

[shamoon]

Sorry for the craziness, this closes two FRs so let’s call it > 10 :)

[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.

[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.

[shamoon]

Cool thanks! I think something happened with the custom provider for search widget, I'll take a look at all of it as soon as I can find a minute

[shamoon]

Hey! Please take a look at my commits there, hopefully the commits explain themselves, but fixed a couple things, tweaked the styling and made some code improvements.

I believe this is ready to go, but please test things out, let me know if you notice anything.

Great work on this!

[Flo2410]

I also found a bug with the greying out of the suggestions. See the http in the third suggestion. I will fix this and would also implement it for the search bar suggestions.

[shamoon]

Great catch about the non-custom providers, I think should be sorted but lmk

[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.

[github-actions[bot]]

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.