Pharaonic
Loading...

Usage

# Basic Usage

A basic usage of Tagify in your component.
ONLY : wire:model, wire:model.defer accepted.

1<div wire:ignore>
2    <input data-pharaonic="tagify" data-component-id="{{ $this->id }}" wire:model="fruits">
3</div>

The result gonna be like this :

1[
2    [
3        "value" => "Apple"
4    ],
5    [
6        "value" => "Banana"
7    ]
8]

# Setting/Retrieving values directly

You can use value attribute to set list of items.
And you can use data-direct attribute to retrieve without sub arrays.

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

The result gonna be like this :

1[
2    "Banana",
3    "Orange",
4    "Apple"
5]

# Allowed/Suggested items

You can use data-suggest-list attribute to set the list that gonna be only allowed or just suggested.
And for using the suggested list you have to set data-suggest attribute.
And for using the allowed list only you have to set data-suggest-enforce attribute.

 1<!-- Suggested List -->
 2<div wire:ignore>
 3    <input data-pharaonic="tagify" data-component-id="{{ $this->id }}" wire:model="fruits"
 4        data-suggest-list='@json(['Banana', 'Orange', 'Apple'])' data-suggest>
 5</div>
 6 
 7<!-- Allowed List -->
 8<div wire:ignore>
 9    <input data-pharaonic="tagify" data-component-id="{{ $this->id }}" wire:model="fruits"
10        data-suggest-list='@json(['Banana', 'Orange', 'Apple'])' data-suggest-enforce>
11</div>

# Disallowed items

You can use data-black-list attribute to set the list that gonna be disallowed..

1<div wire:ignore>
2    <input data-pharaonic="tagify" data-component-id="{{ $this->id }}" wire:model="fruits"
3        data-black-list='@json(['Strawberry'])'>
4</div>

# Advanced Example

 1<div wire:ignore>
 2    <input data-pharaonic="tagify" data-component-id="{{ $this->id }}" wire:model="fruits"
 3    value='[{"value":"Banana", "color":"Yellow"},{"value":"Orange", "color":"Orange"}]'
 4 
 5    data-black-list='["Strawberry"]'
 6 
 7    data-key="color"
 8    data-value="value"
 9    data-suggest-enforce
10    data-suggest-list='[{"value":"Banana", "color":"Yellow"},{"value":"Orange", "color":"Orange"},{"value":"Apple", "color":"Yellow, Green, Red"},{"value":"Strawberry", "color":"Red"}]'
11    data-classname="customSuggestionsList"
12 
13    data-direct
14    data-max=2>
15</div>

In this example we can see that there is a lot of new things but it's ok we gonna explain everything now :

Attribute Description
value
 to set list of key-value pairs items.
data-black-list
 to set list of disallowed items.
data-key
 to set the key and that gonna be sent to the server-side.
data-value
 to set the value and that gonna be shown on the client-side.
data-suggest-enforce
 to allow only the items of the list.
data-suggest-list
 to set list of allowed items (in this case).
data-classname
 to set class name on dropdown list of items so you can customize the styling of it.
data-direct
 to get the values directly on server-side without any sub arrays.
data-max
 to set the limit of the selected items.

# Events

You can use the events to load Tagify all over the page or on a specific input.

1// Init Event
2$this->dispatchBrowserEvent('pharaonic.tagify.init');
3 
4// Load Event
5$this->dispatchBrowserEvent('pharaonic.tagify.load', [
6    'component' => $this->id,
7    'target'    => '#input-here'
8]);