Search UI Plugin Alpine.js

This plugin creates a custom directive x-search-ui to implement a search user interface on an input.

How to use

Installation

Via CDN

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Via npm

npm i alpine-plugin-search-ui

import Alpine from 'alpinejs'
import searchUiPlugin from 'alpine-plugin-search-ui'; 

window.Alpine = Alpine
Alpine.plugin(searchUiPlugin)
Alpine.start()

Using the x-search-ui directive

<div x-data>
  <div x-search-ui class="search-container">
    <input type="text" placeholder="Search...">
  </div>
</div>

Modifiers

To change icon color use these modifiers:

• black
• white

<div x-data>
  <div x-search-ui.black class="search-container">
    <input type="text" placeholder="Search...">
  </div>
</div>