Searching within lists with Alpine.js

For an Alpine.js app, if we have a list (i.e. a JavaScript array) of items, then we can search through the list by making use of properties within the x-data directive object:

<div
  x-data="{
    search: '',

    items: ['aa', 'bb', 'ba', 'ab'],

    get filteredItems() {
      return this.items.filter(
        item => item.includes(this.search)
      )
    }
  }"
>
    ...
</div>

So breaking down the above x-data directive:

• search provides a state variable for the current search query
• items provides a state variable for the list (an array of strings)
• get filteredItems() provides a method to return the results of a search on a list
  • we use the keyword this to refer to the entire object within x-data
    • note how we use this whenever we want to reach any other property or method in this object
  • we then filter on the array with this.items.filter(...)
    • this higher-order filter method finally looks at each item in the array
    • ...and returns any item that contains (includes) the same characters as in the search query

Demo

We can try it in this demo (try it with CAPS LOCK on or with initial spaces!):

First notice that we use the following just for user experience:

• toLowerCase() to avoid case-sensitivity
• trim() to remove whitespace

Also note the following:

• we use x-model with the <input> tag to bind the search property of x-data
• we use an unordered list
  • inside the list we use a <template> tag that represents each item in this dynamic list
    • item refers to each item (a string element) in the filtered array (filteredItems) that changes with each search
    • the :key attribute should provide a unique identifier for debugging purposes
  • each item then displays a list item using an x-text directive
    • the value of x-text then displays the item