I'm fairly new to Alpine.js and looking to create a simple search/filter input to a list of items.

I've seen some examples using <template>, but im not interested in that particular technique.

The list of items already exist on page, so it's a simple goal of hidding and un-hidding items based on a 'tag' array.

1. I need to get all the items in the list (along with submenus). (Hence using x-ref on the <li> and <ul>
2. Filter the array, based on the search input. (Stuck)
3. Hide remaining lists that !== search input. (Stuck)

I've got an simple example on codepen

I'm not sure the best way to bind the list items to x-data, and then I presume using a .filter( $ref.startsWith(.this.search)) to filter the items.