Can you select search result by keyboard?

[ooker777]

The demo (for example, the basic example) doesn't seem to be able to use arrow keys to select the suggestions. They are div tags. On the other hand, the search suggestions, however, can. And they are li tags. As I think it's a basic function, I wonder if this is intentional or not. And why not using the li tags for search results as well? You can always use div in li, right?

In my case, I want to have a richer suggestions. That is, it looks like the search result, but they are just suggestions. Is that possible?

[bloodant]

Hi!

While the default template doesn't use li tags, you can use a custom template with your own logic. Feel free to change the default template available here:
https://github.com/AddSearch/search-ui/blob/master/src/components/searchresults/precompile-templates/searchresults.handlebars
Or, if you are looking for suggestions, the default template is this one:
https://github.com/AddSearch/search-ui/blob/master/src/components/autocomplete/precompile-templates/autocomplete.handlebars

When it comes to the navigation, it is powered by event handlers attached to autocomplete’s li elements, and we currently do not support it for results page, unfortunately.

Let me know if you have any further question, you can get in touch with our support team as well:
[email protected]

[ooker777]

why not support it for result page?

[bloodant]

I have passed your feedback to the development team and we might implement it in the future if we get more requests for this.

Search UI library was intended to give flexibility to build search interface as you like, so it doesn’t provide strict rules for user interaction. For example, building a search interface with grid view will have different keyboard-navigation use cases than a list view. If you are looking for a less flexible solution that supports keyboard navigation, I would recommend checking our ready-made SRP implementation:
https://designer.addsearch.com/search-designer/search-results-page
It is quite easy to configure and install.

[bloodant]

Just a small addition to my previous message. You can implement the navigation for results page as well by following these instructions.

To make each result’s hit focusable (by default “SHIFT” key can focus on focusable elements), an attribute tabindex="0" could be usd.

Then you would need to use eventListener to capture keyboard events and set page’s focus to the target result’s hit.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Important note is that listeners should be attached to the containerId element, because the container element is not re-rendered on each keyword changed, so event listeners won’t be lost.

Let me know if you have any follow-up question!