Installation

#Composer install

To install Livewire autocomplete run:

composer require joshhanley/livewire-autocomplete:dev-next

Once the composer install finishes, the next step is to configure Tailwind to look for the autocomplete components, so all the styles are generated correctly.

#Configure Tailwind

In your tailwind.config.js file, add the path to the autocomplete view directory to the end of the content array:

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        ...
        './vendor/joshhanley/livewire-autocomplete/resources/views/**/*.blade.php',
    ],
    ...
}

And that's it, we have everything we need.

#Optional steps

#Publishing the config

Livewire autocomplete is designed so you shouldn't need to use the configuration.

But sometimes you might need to disable a default option.

To do this you can publish the config by running:

php artisan vendor:publish --tag=livewire-autocomplete

#Disable inline scripts

The javascript assets for Livewire autocomplete are included automatically for you as part of the x-autocomplete component.

It includes the javascript file inline inside @assets/@endassets tags.

But sometimes you might want to include this script manually yourself in your layout file or in your app.js file. To do this, you will first need to publish the Livewire autocomplete config.

Inline scripts can now be disabled by setting the inline_scripts to false in the published config/livewire-autocomplete.php config file:

'inline_scripts' => false,

#Manually including assets

If you wish to include Livewire autocomplete's scripts in your layout file manually, make sure you disable inline scripts first.

Then you can add the following script to your layouts/app.blade.php (or which ever layout file you use):

<script src="{{ route('livewire-autocomplete.asset', 'autocomplete.js') }}"></script>

#Bundling assets

If you wish to bundle Livewire autocomplete's script in your app.js file, make sure you disable inline scripts first.

Then you can include it along with manually bundling Livewire and Alpine.

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import Autocomplete from '../../vendor/livewire-autocomplete/dist/autocomplete.esm'
 
Alpine.plugin(Autocomplete)
 
Livewire.start()