Referencing T255902 for guidance, build the wvui-typeahead-suggestion for Vue.js search.
== Design
**Terminology**
{F32190176 width=500}
The results list follows OOUI guidelines in terms of styling and interactivity. Please refer to either [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop | OOUI ]] or the [[ https://di-searchland-3.web.app/Pancake | demo ]] for additional details.
==== Specs
{F32190333}
==== Styling of page title
The part of the page title that //does not// match the search term will be bolded, e.g.
{F32191181}
==== Image thumbnails
Each search result will have an image thumbnail to the left. In cases where there is no image available from the API we will use a placeholder image.
{F32194667}
**Open question** can we show custom placeholder images for certain types of results? This is currently being done in the search experience within VE > insert link. The ones I would like to differentiate are:
- disambiguation pages
- redirects
- user pages
- special pages
==== Keyboard support
Keyboard support should match the current experience on Wikipedia. This can also be seen on the demo.
- up/down keys to navigate to different search results
- the text in the search box should update to reflect whatever result is currently selected
- enter key to submit a search
==== States
| hovering search result | {F32191183} | background darkens (#EAECF0)
| initial load | {F32191192} | demo: https://di-searchland-2.web.app/
| subsequent loads (if needed) | {F32191196} |
== Patches
https://github.com/wikimedia/wvui/pull/68
https://github.com/wikimedia/wvui/pull/70
== Acceptance criteria
- [] All component acceptance criteria in T255902 are covered.