Skip to content

Search results

Jbraaf edited this page Oct 30, 2019 · 17 revisions

Användningsområde

Search results är en lista som kan användas tillsammans med en Input eller Filter textbox och visas för att synliggöra valbara alternativ. Den är en bra hjälp för användaren för få återkoppling vid val ur ett stort antal alternativ.

Det finns möjlighet att lägga till en stödjande text överst i listan, för att förtydliga att alla träffar inte listats och att användaren behöver specificera sin sökning ytterligare.

Bra att veta

Kallas ibland Auto complete i andra designsystem. Tillsammans med textfält kallas den Combobox.

Search result@2x

Kravspecifikation

  • Alternativ visas som enkla rader eller med en stödjande extrarad. En lång alternativtext visas på flera rader.
  • Markering visas som en rektangel i vänsterkant på hela resultatträffen, oavsett antal rader.
  • Search result är 330 px bred i stora och lilla storleken.
  • Sökresultatet visas under sökfältet/input.
  • Scroll visas då listan överstiger x träffar både i lilla och stora storleken.
  • Om sökningen ger för många (fler än xx) träffar, så visas endast de 25 första.
  • Det är upp till implementatören att utforma den övre stödtexten.
  • Det är upp till implementatören vad som händer då inga träffar finns, detta beror på system och situation

Tillgänglighetskrav

  • Space och Enter väljer fokuserat val.
  • Piltangenter navigerar i listan.
  • Piltangenter loopar runt då listans slut nås. Detta är inkonsekvent mot hur Dropdown select har implementerat en Listbox
  • Enter, mellanslag eller klick på ett alternativ i listan väljer och stänger Search results.
  • Tab stänger Search results utan att göra ett val och fokus flyttar till nästa sak i tab-ordningen.
  • Escape stänger Search results utan att göra ett val, fokus förblir på textrutan.
Clone this wiki locally