Pharaonic
Loading...

# 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.