# TagsSearch

![](/files/aROQ8H0oqzULGSEyh7DE)

![](/files/5rRnvJjnwFgAlcly75N8)

## Example using TagsSearch with [Spatie Tags](https://github.com/spatie/laravel-tags)

### 1. Setup the component

```php
//search RESULT
protected array $tagsSearchResult = [];

//search INPUT
public string $tagsSearchInput = "";

//Set the search input rules, 
//to validate the incoming $value before searching the Database.
protected $rules = [ 'tagsSearchInput' => ... ]; 
```

### 2. Update the search result

```php
// update search RESULT when search INPUT is changed
public function updatedTagsSearchInput($value) //function name = CamelCased search input property name
{
    //validation rules for $value are set in the $rules property
    //dynamically update the search result, consider ->take(...) in an eloquent query
    if (filled($value)) {
        $this->tagsSearchResult = ['Tag1', 'Tag2', 'Tag3', 'Tag4', 'Tag5', 'Tag6', 'Tag8', 'Tag9', 'Tag10'];
    } else {
        $this->tagsSearchResult = []; //if you want to clear the search options if the user clears the search input
    }
}
```

### 3. Define the field

```php
protected function fields()
{
    return [
        TagsSearch::make('TagsSearch', 'temporary_tags')
            ->searchKey('tagsSearchInput')//search INPUT property name
            ->fieldWidth('w-full sm:max-w-sm')
            ->listWidth('w-full max-w-xs')
            ->options($this->tagsSearchResult) //search RESULT property
            ->default(optional($this->model)->exists ? $this->model->tags()->pluck('name') : []) //model VALUE, or empty array
            ->debounce(500)
            ->allowNew() //or disableNew(), true by default
            ->custom() //saveFoo()
            // ->errorMsg(...)->help(...)->placeholder(...) //default in translation files
            // ->rules(...) //optionally see below
    ];
}
```

### 4. Save the tags

```php
protected function saveTemporaryTags($validated_array)
{
    //example; remove duplicates, ucfirst on each array item
    $cleaned = array_map('ucfirst', array_unique($validated_array));
    
    //Spatie sync tags
    $this->model->syncTags($cleaned);
}
```

## Methods

### ->help()->errorMsg()->placeholder()

[Translation](/tall-forms/installation/manual-installation/localisation.md) files contains defaults

### ->rules() (optional)

Rules apply to each tag. \
A default rule already exists in the Tags class; `'string|alpha_dash|between:3,25'`

## Headless

Follow the instructions above and add this to your blade view

```html
<x-tall-tags-search 
  :field="TagsSearch::blade('TagsSearch', 'temporary_tags')
    ->searchKey('tagsSearchInput')//search INPUT property name
    ->fieldWidth('w-full sm:max-w-sm')
    ->listWidth('w-full max-w-xs')
    ->options($this->tagsSearchResult) //search RESULT property
    ->default(optional($this->model)->exists ? $this->model->tags()->pluck('name') : []) //model VALUE, or empty array
    ->debounce(500)
    ->allowNew() //or disableNew(), true by default
    ->custom()"
/>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tina-hammar.gitbook.io/tall-forms/field/fields/tagssearch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
