Unable to locate a class or view for component [autocomplete]

[eswachsman]

I am trying to use this just like the example in the Readme. But it seems Laravel can't find it. Am I missing anything?

Unable to locate a class or view for component [autocomplete]

<x-autocomplete
    name="my-autocomplete"
    wire:model-id="clientId"
    wire:model-text="clientName"
    wire:model-results="clients"
    wire:focus="getClients"
    :options="[
        'id' => 'id',
        'text' => 'name',
        'auto-select' => true,
        'allow-new' => true,
        'load-once-on-focus' => true,
        'inline' => true,
        'inline-styles' => 'relative',
        'overlay-styles' => 'absolute z-30',
        'result-focus-styles' => 'bg-blue-500',
    ]"
    :components="[
        'outer-container' => 'my-outer-container',
        'input' => 'my-input',
        'clear-button' => 'my-clear-button',
        'dropdown' => 'my-dropdown',
        'loading' => 'my-loading',
        'results-container' => 'my-results-container',
        'prompt' => 'my-prompt',
        'results-list' => 'my-results-list',
        'add-new-row' => 'my-add-new-row',
        'result-row' => 'my-client-result-row',
        'no-results' => 'my-no-results',
    ]"
/>

[joshhanley]

@eswachsman no, you're not missing anything, it looks like I'm missing some info in the readme!

By default Laravel puts all package blade components under a package namespace, so for this package you need to use <x-lwa::autocomplete ...>

I don't have that information in the readme yet 🤦‍♂️.

But if you want to use just <x-autocomplete ...> you can publish the config and set 'use_global_namespace' => true,, which will remove the need for lwa:: in the component name.

I'd suggest having a look at the demo application as it has examples of what is needed to get it running https://github.com/joshhanley/livewire-autocomplete-demo

Please note though that this package is still not tagged v1.0 yet as I'm still sorting out a few issues with it 🙂

Hope this helps!

[alan9608]

What EXACTLY are you supposed to type on the right side of the equal sign? The documentation shows
'clear-button' => 'my-clear-button',
but of course this is wrong.
is it
'clear-button' => '<x-lwa::clear-button />',
?
Since I don't know how this piece of information will be formatted, or where it will be inserted, the examples are not very helpful.

[joshhanley]

@alan9608 sorry that's not clear!

Under the hood it uses Laravel's dynamic components, so what you put in there is the same as what you'd put in the component="..." attribute on a dynamic component https://laravel.com/docs/10.x/blade#dynamic-components

So for example, if you have your clear button in resources>views>components>buttons>my-clear-button.blade.php then you would put 'clear-button' => 'buttons.my-clear-button'.

Hope this helps!

[joshhanley]

@eswachsman I've updated the readme with some more details.

Hope this helps!

[eswachsman]

Awesome! Thanks!

[joshhanley]

No worries! 🙂

[alan9608]

Thank you Josh, I have much of it working now.