How to make a search component in Alpine.js

Alpine.js is a new and lightweight JavaScript framework that offers easy-to-use directives to add behavior and functionality to web pages right from the markup.

In this shot, we will go over how to create a search component in Alpine.js.

Step 1: Design the form and output list

• Copy the starter template on the Bootstrap official website and add the CDN link to Alpine.js.

• Add a search input field and list items so your page has the following content:

The result of the code above should be as follows:

Step 2: Extract search items to a state

• Use Alpine’s x-data directive to store the list of search items.

• Update the container div to match the code below:

<div x-data="{ items: ['Apple', 'Banana', 'Guava', 'Ape', 'Bands'] }">
    	<!-- Search input -->
    	<input type="search" placeholder="Enter Keyword here">
    	
    	<!-- List items -->
    	<ul>
    	  <template x-for="item in items">
    	  	<li x-text="item"></li>
    	  </template>
		</ul>
    </div>

• Now, the search items are stored in state and are iterated over to form the list.

Step 3: Create a search model

• Now, you can connect the search input to a data property in a state like so:

<div 
     
    	x-data="{ 
    		search: ''
    		items: ['Apple', 'Banana', 'Guava', 'Ape', 'Bands'] 
    	}">
    	<!-- Search input -->
    	<input type="search" placeholder="Enter Keyword here" x-model="search">
    	<!-- Other code -->
</div>

• The state has been updated to have a search field that maps to the input field.

Step 4: Create a computed property to return search results

• Add the following to your x-data object:

get searchResults () {
    return this.items.filter(
        i => i.startsWith(this.search)
    )
}

• This function checks for items in your list that start with the user input.

• Update x-for to display results from the search rather than the initial list.

<template x-for="item in searchResults"></template>

Now, the search bar works when users type in it.