Tagify

Tagify

Simple way to handle Tagify for livewire components.

Moamen Eltouny (Raggi)
PHP Version : >= 7.2 Livewire Version : >= 2.0 License Support
Source Packagist Version Packagist Downloads

Laravel Livewire Tagify

Install

Install the latest version using Composer

composer require pharaonic/livewire-tagify
php artisan migrate

OptionalPublish the JavaScript file.

php artisan vendor:publish --tag=livewire-tagify
Inclusion

This is how you can include it in your blade.

You have to include it after Livewire Scripts, there is 2 ways you can use on of them.

<!-- Way 1 -->
<x:pharaonic-tagify::scripts />

<!-- Way 2 : Vendor Publishing REQURIED -->
<script src="{{ asset('vendor/pharaonic/pharaonic.tagify.min.js') }}"></script>
Usage

A basic usage of tagify in your component.

ONLY wire:model, wire:model.defer accepted.

<input data-pharaonic="tagify" data-component-id="{{ $this->id }}" wire:model="keywords">

// Output Example on Server-Side :
[
    0 => [
        'value' => 'Pharaonic'
    ]
]

Setting values and retrieving values directly without sub arrays.

<input data-pharaonic="tagify" data-component-id="{{ $this->id }}" wire:model="fruits"
    value='@json(['Banana', 'Orange', 'Apple'])' data-direct>

// Setting values as JSON string.
// Using data-direct will retrieve values like this : ['Banana', 'Apple']

Show a dropdown list with suggested items.

<input data-pharaonic="tagify" data-component-id="{{ $this->id }}" wire:model="fruits"
    data-suggest-list='@json(['Banana', 'Orange', 'Apple'])' data-suggest>

// Setting data-suggest-list values as JSON string.
// Using data-suggest will suggest the list but will allow forgin values too.
// Using data-suggest-enforce will suggest the list ONLY.

Disallow & Remove list of items values.

<input data-pharaonic="tagify" data-component-id="{{ $this->id }}" wire:model="fruits"
        data-black-list='@json(['Watermelon'])'>

// Setting data-black-list values as JSON string.

Advanced Example [Explained].

<input data-pharaonic="tagify" data-component-id="{{ $this->id }}" wire:model="fruits"

        // Setting compound list MUST have "value".
        value='[{"value":"Banana", "color":"Yellow"},{"value":"Orange", "color":"Orange"}]'

        // Disallow array of items values.
        data-black-list='["Banana"]'

        // Suggest compound list with enforce suggestions ONLY.
        data-suggest-list='[{"value":"Banana", "color":"Yellow"},{"value":"Orange", "color":"Orange"},{"value":"Apple", "color":"Yellow, Green, Red"},{"value":"Watermelon", "color":"Red"}]'
        data-suggest-enforce

        // Setting : Search value & Retrieving key & Asking for direct values of these items
        // So if you choose Red only then you will get on server-side ['Watermelon']
        data-value="color"
        data-key="value"
        data-direct

        // Limiting the selecting options & Setting a class name to main div of suggestion list.
        data-max=2
        data-classname="suggest-div-inline-class">