Referencing T255902 for guidance, build the wvui-typeahead-suggestion for Vue.js search.
Design
Terminology
The results list follows OOUI guidelines in terms of styling and interactivity. Please refer to either OOUI or the demo for additional details.
Specs
Styling of page title
The part of the page title that does not match the search term will be bolded, e.g.
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.
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 |  | background darkens (#EAECF0) |
| initial load |  | demo: https://di-searchland-2.web.app/ |
| subsequent loads (if needed) |  | |
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.
