TALL-forms
  • TALL-forms
  • Installation
    • Quickstart: Artisan cmd
    • Manual installation
      • Package
      • Translations
      • Css & Theme
      • Javascript
      • Tailwind
      • Laravel Mix
      • Wrapper view
      • Laravel Jetstream/Breeze
  • Upgrade v7 to v8
    • Configuration changes
    • Component & Field changes
    • Blade view changes
    • Notification changes
    • Styling changes
  • Concept
    • Configuration
    • Validation
    • Styling
    • Icons
    • Javascript
    • Layout vs Wrapper
    • Model binding
    • Manually saving data
    • Extend Blade Components
  • Create Forms
    • Form Data
    • Form Types
      • Standard form
      • As modal
      • Without buttons
      • Fields only
      • Headless
    • Form attributes
    • Form buttons
    • Form slots
    • Form methods
    • Lifecycle hooks
    • Render a form
    • Mass generate
  • Fields
    • Declaration
    • Labels
    • Field Slots
    • Field methods
    • Custom field attributes
    • Conditional field
    • Custom view
    • Custom field
    • Custom Livewire component
    • Relations
    • Fields
      • Checkbox
      • Checkboxes
      • FileUpload
      • Honeypot
      • ImageCropper
      • Input
      • Password
      • InputArray
      • KeyVal (array)
      • Radio
      • Range
      • Repeater (array)
      • Search
      • Select & Multiselect
      • Tags
      • TagsSearch
      • Textarea
      • Trix
      • SpatieTags
    • Sponsor Fields
      • More Inputs
      • CKEditor
      • DatePicker
      • Heading
      • Markdown
      • Panels
      • SearchList
      • SelectOptGroup
      • Tabs
      • Trix, file-uploads
  • Blade components
    • Notifications
    • Label wrapper
    • Button
    • Modal blade component
    • Modal form blade component
  • Examples
    • Input examples
    • Array fields example
Powered by GitBook
On this page
  • Example using TagsSearch with Spatie Tags
  • 1. Setup the component
  • 2. Update the search result
  • 3. Define the field
  • 4. Save the tags
  • Methods
  • ->help()->errorMsg()->placeholder()
  • ->rules() (optional)
  • Headless

Was this helpful?

  1. Fields
  2. Fields

TagsSearch

PreviousTagsNextTextarea

Last updated 3 years ago

Was this helpful?

1. Setup the component

//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

// 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

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

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()

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

<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()"
/>

Example using TagsSearch with

files contains defaults

Spatie Tags
Translation