Allowing users to search through their list will help them cut down on clutter and focus on items they’re looking for.
Acceptance criteria
[ ] A form is added to the top of the List view, above the shopping list
[ ] The form includes the following elements
A text field (with semantic <label>!) which narrows down the list as the user types
When there’s text in the field, some kind of button (e.g., an X) to clear the field. When the field is cleared, the list is reset to its unfiltered state.
Notes
You will know your <label> is correctly implemented if you click on the label and keyboard focus moves to the related input. Refer to the MDN docs on <label> for more info.
The filter text should match any part of the item name (e.g., it should not only match from the start of the string)
This wireframe shows the filter field, but not it being used
Summary
Allowing users to search through their list will help them cut down on clutter and focus on items they’re looking for.
Acceptance criteria
Listview, above the shopping list<label>!) which narrows down the list as the user typesNotes
<label>is correctly implemented if you click on the label and keyboard focus moves to the related input. Refer to the MDN docs on<label>for more info.