Documentation

Autocomplete extends Component
in package

Autocomplete Laravel Blade Component

An autocomplete input component that provides dynamic suggestions as users type. Supports customizable labels, hints, and placeholder text for enhanced user experience. Can be integrated with Livewire for real-time updates.

Features:

  • Dynamic suggestions based on user input
  • Customizable labels and hints
  • Placeholder text support
  • Option to search by start of the string or anywhere
  • Form validation integration
  • Livewire real-time updates
  • Bulma CSS framework integration
  • Mobile-friendly responsive design

Livewire Integration:

IMPORTANT: The component handles Livewire communication through custom events.

Events Dispatched:

  • AutoCompleteSet:{{ $name }} - Fired when value is set Payload: { value: string }

Events Listened For:

  • AutoCompleteInit:{{ $name }} - Initialize component with value and label Payload: { value: string, label: string }
  • AutoCompleteReset - Reset component for specified fields Payload: { autoFields: array }
  • AutoCompleteItems:{{ $name }} - Update available items/options Payload: { items: array }
Tags
author

V360

version
1.0.0
since
2024-06-25
example

Table of Contents

$hint  : string|null
$id  : string|null
$isLivewire  : bool
$label  : string|null
$name  : string
$options  : mixed
$placeholder  : string|null
$startSearch  : bool
$value  : string|null
__construct()  : mixed
Create a new component instance
render()  : View|string
Get the view / contents that represent the component.

Properties

Methods

__construct()

Create a new component instance

public __construct(string $name, mixed $options[, string|null $value = null ][, string|null $id = null ][, string|null $label = null ][, string|null $placeholder = null ][, string|null $hint = null ][, bool $startSearch = false ][, bool $isLivewire = false ]) : mixed
Parameters
$name : string

Name of the input

$options : mixed

Options for the autocomplete Array or Collection

$value : string|null = null

Value of the input

$id : string|null = null

ID of the input, in case of not provided, slug version of the name will be used

$label : string|null = null

Label of the input, in case of not provided, title version of the name will be used

$placeholder : string|null = null

Placeholder of the input, default is "Select"

$hint : string|null = null

Hint of the input

$startSearch : bool = false

Search by start or not, default is false

$isLivewire : bool = false

Livewire component or not, default is false

Return values
mixed —

render()

Get the view / contents that represent the component.

public render() : View|string
Return values
View|string —

Search results