Search Boxes Components

Jump to:

Autocomplete Search Component using Livewire

Suggest autocomplete results on user keyword type in input box.

UI Stack: Tailwind CSS, New, Livewire

Searching...

Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted
Sorry, this component's code is restricted

Usage

To include the search box on your page or navigation you just have to include the livewire component.


@livewire('search-component')

Documentation

In this demonstration, we are using Spatie Searchable package for our search operation.

You must install it first.


composer require spatie/laravel-searchable
Preparing your Model

In this demonstration, I performed a search on a Model named DummyProduct as shown in the DummyProuct tab. In order to search through models you'll have to let them implement the Searchable interface.

You'll only need to add a getSearchResult method to each searchable model that must return an instance of SearchResult.

Livewire Component code is simple, we have utilized the updated hook on the keyword variable. Thus whenever the user types in the keyword, Livewire components runs a query on the database to gather the results.

We then run through the results on the front end.

Command Palette

Cmd-K or Ctrl-K palette with keyboard navigation.

Command palette

Press Ctrl + K or ⌘ + K

  • No matching commands

Code
Please login to View/Download the Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Open with Ctrl/Cmd-K, filter, and move with the arrow keys. select is the hook for navigation. Flux UI Pro sells a palette; this one ships as source you own.

Components on this page

2 components