7. As a user, I want to filter my shopping list to make it easier to locate an item in the list

[fullybaked]

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

• 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)