Back to product momentsMotion Pack 22 · Choice
Search suggestions
While a query is entered, let suggestions, result count, and chosen item follow the current terms closely.
Suggestions
Build a search-suggestions surface: after typing a query, show matching suggestions and a result count; choosing one fills it back into the field and shows an opened state. Suggestions use only brief opacity and small-travel entrance with a reduced-motion treatment.
EntranceSlide inSuggestion rows settle below the field with very small downward travel.SequencingStaggerVisible suggestions enter at short intervals to preserve reading order.State changeText morphThe result count updates from the current query in real time.Reduced motionReduced motionWith reduced motion, suggestions update directly while focus and result copy remain.
Motion rules
After choosing a suggestion, confirm the opened content near the field.
Reduced motion
Update the suggestion list directly while retaining focus and result copy.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.