my search is broken

[samuelrac]

I did the implementation of autocomplete but my searches are broken, as shown in the image below, I don't know how to solve it, could you help me?

[joshhanley]

@samuelrac hard to say without seeing your code, but it looks like you are using Eloquent models, so you might not have specified which property to display.

Have a look at my demo here, you can see it is being passed a list of user models, so I specify 'text' => 'name' to use the name property on the user model.

https://github.com/joshhanley/livewire-autocomplete-demo/blob/d11370a995e494d377ffee02efc94d8f2507a51d/resources/views/livewire/main.blade.php#L11-L14

Maybe you need to do something like that?

Hope this helps!

[samuelrac]

Hi, thank you very much for your help, this is exactly what I was missing, I am pulling information from a MongoDB database with Eloquent.

However, now I need another help, I'm trying to perform an action when the item is selected in autocomplete, but I'm not getting it.

My component configuration is:

In this case, I need to retrieve the ID of the item that was selected to perform a save action in REDIS, but I am not able to retrieve the ID of the item.

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Redis;

use Livewire\Component;
use App\Models\{
    Client,
    Product
};

class OrderCreate extends Component
{
    public $nomeCliente;
    public $idCliente;

    // Autocomplete VARS
    public $nomeProduto;
    public $idProduto;
    public $products;

    // Order VARS
    public $orderId;
    protected $queryString = ['orderId'];

    // Events VARS
    protected $listeners = ['clientSelectedEvent'];

    // Evento disparado pelo modal de busca de cliente
    public function clientSelectedEvent($id)
    {
        try {
            // Recupera o cliente pelo ID
            $cliente = Client::find($id);
            $this->dispatchBrowserEvent('clientSelectedEvent', [
                'idCliente' => $id,
                'nomeCliente' => $cliente->nomeCliente,
            ]);
        } catch (\Exception $e) {
        }
    }

    public function mount()
    {
        $this->getProduct();
    }

    public function updatedIdProduto()
    {
        $this->nomeCliente = $this->idProduto;
    }

    public function updatedNomeProduto()
    {
        $this->getProduct();
    }

    public function getProduct()
    {
        $this->products = Product::query()
        ->when($this->nomeProduto, function($query, $term) {
            return $query->where('nomeProduto', 'like', '%'. $term .'%');
        })->get();

    }

    public function render()
    {
        //Redis::set('nomeCliente', $this->nomeCliente);
        return view('livewire.order-create');
    }

}

[joshhanley]

@samuelrac ah maybe, I didn't realise Mongo has a different id structure. Yeah I think what you have done mapping 'id' => '_id' seems like the right thing to do. Can you do a dump of one of your products so I can see what its structure looks like so I can confirm that?

Also one other thing I noticed, is you don't have a $rules property in your component. Livewire won't send any Eloquent Collection or Eloquent Model data to the front end without it. See the warning box in this section of the Livewire docs https://laravel-livewire.com/docs/2.x/properties#binding-models

So try also adding this to your component, which should allow Alpine to see the _id and nomeProduto of the products collection.

protected $rules = [
    'products.*._id' => '',
    'products.*.nomeProduto' => '',
];

Hope this helps!

[samuelrac]

Woooool, it worked perfectly, I was missing the protected $rules, it was very good, one last question please, would it be possible for me to reset the autocomplete field as soon as the item is selected? My idea would be to select the item and fill in a table and add it to redis, and then add another product without having to click on the "X".

Here is my product database structure in MongoDB:

{
    "_id" : ObjectId("62128862d936000079006992"),
    "nomeProduto" : "1 produto de teste editado",
    "valorCusto" : 1.5,
    "valorVenda" : 1.9,
    "valorLucro" : 0.4,
    "porcentagemLucro" : 26.67,
    "quantidade" : 100.0,
    "status" : "active",
    "updated_at" : ISODate("2022-02-21T02:38:56.423Z"),
    "created_at" : ISODate("2022-02-20T18:28:50.769Z")
}

[joshhanley]

@samuelrac nice!

Yeah just set your $idProduto and $nomeProduto properties to null once you have processed the ID and that should clear it out.

[samuelrac]

Thank you so much, you have no idea how much you helped me! I've been programming for a while but I'm starting with livewire now and it's been a little tricky for me.

[joshhanley]

@samuelrac no worries! Glad it's all sorted for you 🙂