Advanced search suggestions

[mauritskorse]

I am trying to create a search input with search suggestions (something like Algolia search). Basically that means that I am looking for a search field that shows suggestions. The popover showing the suggestions should be able to contain more details than just the name of the search result; for example a category to which the result belongs (in a fancy flux badge of course), some description, or the snippet(s) in which the searched query was found.

As example the livewire search:

I have tried various routes (using dropdown, command and autocomplete), but the one that already seems to work best is using a combobox that dynamically loads the results. However, for further improvements it would be great to have the following options:

• make the matchWidth property on the Anhorable configurable (can't do that myself as it is part of the webcomponent js)
• add support for the align attribute in ui-select. Where position and offset are already available, align is not. Especially when the width of the option popover does not match the search input, it would be great to have the align attribute avaible.
• adjust the trailing icon into magnifying glass on the input field of the combobox (is possible by publishing the component)
• hide the checkbox from the select option (is possible by publishing the component)
• determine what to do with the input field once an option is selected (keep the current search query, insert the title of the suggested result, clean it out) (I guess some alpine might help out here, but haven't gotten there yet)
• In case you insert the currently selected option into the search field, determine what info should be visible/hidden. Just like how the checkbox is hidden. (I would think that publishing the webcomponent could be enough to do this, but I haven't got it to work the way I want yet).

Disabling the width match of the search field with the search suggestions and being able to set the align attribute are the most important ones as it would keep the search field space efficient inside a navigation bar, while allowing a spacious popover that can properly show the details of the suggested search results.

[mauritskorse]

I have found a way to override the matchWidth by adding !w-fit max-w-96 to the popover div. However, alignment is still an issue.

For those intereseted, this is how it looks right how: