Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

Autocomplete

Autocomplete component with real-time search, filtering, and keyboard navigation for selecting options from a list

Basic Usage

The most basic autocomplete with simple options: 
<neura::autocomplete placeholder="Type to search...">
    <neura::autocomplete.option value="1" label="John Doe" />
    <neura::autocomplete.option value="2" label="Jane Smith" />
    <neura::autocomplete.option value="3" label="Bob Johnson" />
</neura::autocomplete>

With Label

Add a label to the autocomplete using the field component:
Select User 
<neura::field>
    <neura::label>Select User</neura::label>
    <neura::autocomplete placeholder="Search users...">
        <neura::autocomplete.option value="1" label="John Doe" />
        <neura::autocomplete.option value="2" label="Jane Smith" />
    </neura::autocomplete>
</neura::field>

With Livewire

Use wire:model to bind the selected value to a Livewire property:
Selected User ID: None 
<neura::autocomplete 
    wire:model="selectedUserId"
    placeholder="Search users..."
>
    <neura::autocomplete.option value="1" label="John Doe" />
    <neura::autocomplete.option value="2" label="Jane Smith" />
</neura::autocomplete>

With Alpine.js

Use x-model to bind the selected value to an Alpine.js property:
Selected: 
<div x-data="{ selectedUser: null }">
    <neura::autocomplete 
        x-model="selectedUser"
        placeholder="Search users..."
    >
        <neura::autocomplete.option value="1" label="John Doe" />
        <neura::autocomplete.option value="2" label="Jane Smith" />
    </neura::autocomplete>
</div>

Clearable

Enable the clear button with clearable attribute: 
<neura::autocomplete 
    placeholder="Search users..."
    clearable
>
    <neura::autocomplete.option value="1" label="John Doe" />
    <neura::autocomplete.option value="2" label="Jane Smith" />
</neura::autocomplete>

With Icons

Add icons to the autocomplete input: 
<neura::autocomplete 
    placeholder="Search users..."
    leftIcon="magnifying-glass"
    clearable
>
    <neura::autocomplete.option value="1" label="John Doe" />
    <neura::autocomplete.option value="2" label="Jane Smith" />
</neura::autocomplete>

Sizes

Control the size of the autocomplete input: 
<neura::autocomplete placeholder="Small" size="sm">
    <neura::autocomplete.option value="1" label="Option 1" />
</neura::autocomplete>

<neura::autocomplete placeholder="Large" size="lg">
    <neura::autocomplete.option value="1" label="Option 1" />
</neura::autocomplete>

Minimum Characters

Set the minimum number of characters required before filtering options: 
<neura::autocomplete 
    placeholder="Type at least 3 characters..."
    :minChars="3"
>
    <neura::autocomplete.option value="1" label="John Doe" />
    <neura::autocomplete.option value="2" label="Jane Smith" />
</neura::autocomplete>

Debounce

Control the debounce delay for search filtering (in milliseconds): 
<neura::autocomplete 
    placeholder="Search with 500ms debounce..."
    :debounce="500"
>
    <neura::autocomplete.option value="1" label="John Doe" />
    <neura::autocomplete.option value="2" label="Jane Smith" />
</neura::autocomplete>

Disabled State

Disable the autocomplete input: 
<neura::autocomplete 
    placeholder="Disabled autocomplete"
    disabled
>
    <neura::autocomplete.option value="1" label="John Doe" />
    <neura::autocomplete.option value="2" label="Jane Smith" />
</neura::autocomplete>

Keyboard Navigation

The autocomplete supports full keyboard navigation:
  • Arrow Down - Navigate to next option
  • Arrow Up - Navigate to previous option
  • Enter - Select the highlighted option
  • Escape - Close the dropdown

Props

Prop Type Default Description
name string auto Form input name (auto-detected from wire:model or x-model)
placeholder string 'Type to search...' Placeholder text for the input
clearable boolean false Show clear button when value is selected
disabled boolean false Disable the autocomplete input
invalid boolean auto Show validation error state (auto-detected from errors bag)
leftIcon string null Icon name to display on the left side
rightIcon string null Icon name to display on the right side
size string 'md' Size of the input: 'xs', 'sm', 'md', 'lg'
minChars integer 1 Minimum characters required before filtering options
debounce integer 300 Debounce delay in milliseconds for search filtering

Best Practices

  • Use minChars to reduce unnecessary filtering for large option lists
  • Adjust debounce based on your data source (lower for local data, higher for API calls)
  • Always provide meaningful labels for options to improve searchability
  • Use the clearable option when the selection is optional
  • Consider using icons to improve visual clarity (e.g., magnifying-glass for search)
  • For large datasets, consider implementing server-side filtering instead of client-side