Search

Free version

Sponsor version

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

Extends BaseField

Additional 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

->debounce(int $milliseconds)

• debounce the search input
• default = 500

->listWidth(string $class)

• the width of the search result dropdown
• default = null

Example

1. Add the search RESULT and INPUT properties

• IMPORTANT: use unique property names if adding multiple search fields to the same component

public array $parents = []; //search RESULT
public string $parentSearch = ''; //search INPUT

2. Populate the properties in mount()

• It is required to set the initial/existing values, if you use ->default() method on the field
• Read more examples on how to populate the $options on the Relations wiki 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 Livewire updatedFoo() hook.
• consider using ->take() in an eloquent query
• updatedFoo() = updatedCamelCased() search input property name

public function updatedParentSearch($value)
{
    if(filled($value)) {
        //example Parents::where('name', 'like', '%' . $value . '%')->pluck('id', 'name')->take(10);
        $this->parents = [
            1 => 'Parent one',
            2 => 'Parent two',
            3 => 'Parent three',
        ];
    } else {
        //if you want to clear the search options if 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
    ->debounce(300) //default = 500
    ->placeholder('Search for a parent name')
    ->rules(['nullable', Rule::in(array_keys($this->parents))]); //more rule examples see relations doc

Blade component

<div x-data="{
    optionsVisible: false,
    field: @entangle($field->key),
    selected: null,
    searchInput: @entangle($field->searchKey)}
">
    <x-tall-search
        :field="$field"
        :options="$field->options"
    />
</div>

Styling

Extend Blade component (or override in config file)

Tanthammar\TallForms\Components\Search::class

Config options

//Select placeholders and help, applied as trans(...) or @lang(...)
'search-placeholder' => 'global.search_placeholder', //'Search ...' //used for both Search and SearchList fields

Theme

 /* Search */
    .tf-search-dropdown {
        /* $field->listWidth will be appended */
        @apply z-50 absolute mt-1 rounded-md bg-white shadow-lg;
    }
    .tf-search-dropdown-width {
        @apply max-w-xs w-full;
    }
    .tf-search-ul {
        @apply rounded-md py-1 text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5;
        max-height: 15rem;
    }
    .tf-search-li {
        @apply text-gray-900 cursor-default select-none relative py-2 pl-3;
        padding-right: 2.25rem;
    }
    .tf-search-selected {
        @apply text-white tf-bg-primary;
    }
    .tf-search-unselected {
        @apply text-gray-900;
    }
    .tf-search-icon {
        @apply absolute inset-y-0 right-0 flex items-center pr-4;
    }
    .tf-search-icon-selected {
        @apply text-white;
    }
    .tf-search-icon-unselected {
        @apply text-indigo-600;
    }