Search

First Tab

Basic version, Search

Sponsor version, SearchList

Please 💗 sponsor this package 🔗 in order to get access to this field. The documentation is available in the sponsor repository.

Component

1. Add the search RESULT and INPUT properties

Use unique property names if adding multiple search fields to the same component

public string|int $parent_id = 5; //SELECTED value
public array $parents = [];//search RESULT and $field->default() value
public null|string $parentSearch = ""; //search INPUT

2. Populate the properties

It is required to set the initial/existing values, if you use the ->default() method on the field. Read more examples on how to populate the $options on the Relations page

public function mount()
{
    $this->$parents = [ 
        5 => 'Parent five', //populate the search RESULT with existing value
    ];
    $this->parentSearch = "Parent five"; //populate the search INPUT with the existing value
}

3. Add reactivity to the search input

Update search RESULT when search INPUT changes, using the updatedFoo() hook.

// update search RESULT when search INPUT is changed
public function updatedParentSearch($value)
{
    if (filled($value)) {
    //you probably want to make a query here
    //example Parents::where('name', 'like', '%' . $value . '%')->pluck('id', 'name')->take(10);
        $this->parents = [ 
            1 => 'Parent one',
            2 => 'Parent two',
            3 => 'Parent three',
        ];
    } else {
    //Clear the search options when the user clears the search input
        $this->parents = []; 
    }
}

4. Define the field

Search::make('Parent', 'parent_id')
    ->fieldWidth('w-full sm:max-w-sm')
    ->listWidth('w-full sm:w-2/3')
    ->options($this->parents) //search RESULT property
    ->searchKey('parentSearch')//search INPUT property name as string
    ->default(5) //the $key for existing value, Example: $this->model->parent_id, see mount()
    ->debounce(300) //default = 500
    ->placeholder('Search for a parent name')
    ->rules(['nullable', Rule::in(array_keys($this->parents))])

Headless

Follow the instructions on the Component tab, and add this to your blade view

<x-tall-search 
    :field="Search::blade('Search', key: 'parent_id') //key = Livewire property to STORE the value
    ->searchKey('parentSearch') //bind search INPUT to Livewire property
    ->fieldWidth('w-full sm:max-w-sm')
    ->listWidth('w-full max-w-xs')
    ->options($parents) //Livewire property holding the search RESULT
    ->default(5)
    ->debounce(500)
    ->placeholder('Search for a parent name')"
/>

Methods

->options($options) - search RESULT

• The component property that contains the search result.

• A key => value based Array, Collection or Closure.

->searchKey(string $property) - search INPUT

• The property that is bound to the search input

->default(mixed $value)

If you set a default value, make sure it exists in the search result property.

->disabled()

The value of $searchKey will will be displayed if the field is disabled and current field value isn't available in the initial $field->options()

This is how it is implemented in the blade file:

if($field->disabled) 
value=data_get($field->options, $field->key, data_get($this, $field->searchKey))

->debounce(int $milliseconds)

• debounce the search input

• default = 500

->listWidth(string $class)

• the width of the search result dropdown

• default = null