Search AutoComplete laravel livewire

I want to be able to search related tables I have Three Tables Item, InventoryItem and attributeValue

class Item extends Model
{
    use HasFactory;

    protected $fillable = ['item_name','item_description','created_at','updated_at'];

    public function inventoryItems()
    {
        return $this->hasMany(InventoryItem::class);
    }
}

class InventoryItem extends Model
{
    use HasFactory;

 protected $fillable = ['item_id','category_id','created_at','updated_at'];

    public function item()
    {
        return $this->belongsTo(Item::class);
    }
	public function category()
    {
        return $this->belongsTo(Category::class);
    }

    public function attributeValues()
    {
        return $this->belongsToMany(AttributeValue::class);
    }
}

class AttributeValue extends Model
{
    use HasFactory;

 protected $fillable = ['attribute_id','attribute_value_name','attribute_value_description','created_at','updated_at'];

    public function inventoryItems()
    {
        return $this->belongsToMany(InventoryItem::class);
    }
}

class InventoryInStore extends Model
{
    use HasFactory;

    protected $fillable = ['inventory_item_id','quantity','store_id'];

    public function store()
    {
        return $this->belongsTo(Store::class);
    }

    public function inventoryItem()
    {
        return $this->belongsTo(InventoryItem::class);
    }
}

So I want to be able to search by Item_name with attributeValue in InventoryInStore which I am going to be able to select as autocomplete input. By using Laravel livewire

LaryAI

1 year ago

Level 58

To implement a search autocomplete feature using Laravel Livewire that allows you to search by item_name and attributeValue in InventoryInStore, you can follow these steps:

Create a Livewire Component:

First, create a Livewire component that will handle the search logic and display the results.
```
php artisan make:livewire SearchAutocomplete
```

Update the Livewire Component:

In the SearchAutocomplete component, you will need to define the search logic. Here's an example of how you might implement it:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Item;
use App\Models\InventoryInStore;

class SearchAutocomplete extends Component
{
    public $query;
    public $results = [];

    public function updatedQuery()
    {
        $this->results = InventoryInStore::with(['inventoryItem.item', 'inventoryItem.attributeValues'])
            ->whereHas('inventoryItem.item', function ($query) {
                $query->where('item_name', 'like', '%' . $this->query . '%');
            })
            ->orWhereHas('inventoryItem.attributeValues', function ($query) {
                $query->where('attribute_value_name', 'like', '%' . $this->query . '%');
            })
            ->get();
    }

    public function render()
    {
        return view('livewire.search-autocomplete');
    }
}

Create the Blade View:

Create a Blade view for the Livewire component. This view will include an input field for the search query and display the search results.

<!-- resources/views/livewire/search-autocomplete.blade.php -->
<div>
    <input type="text" wire:model="query" placeholder="Search items..." />

    @if(!empty($results))
        <ul>
            @foreach($results as $result)
                <li>
                    {{ $result->inventoryItem->item->item_name }} - 
                    @foreach($result->inventoryItem->attributeValues as $attributeValue)
                        {{ $attributeValue->attribute_value_name }}
                    @endforeach
                </li>
            @endforeach
        </ul>
    @endif
</div>

Include the Livewire Component in Your View:

Finally, include the Livewire component in the view where you want the search functionality to appear.
```

@livewire('search-autocomplete')
```
Ensure Livewire is Set Up:

Make sure you have Livewire set up in your Laravel application. You can follow the Livewire installation guide if you haven't done so already.

This setup will allow you to search for items by item_name and attributeValue in the InventoryInStore model, and display the results in an autocomplete dropdown. Adjust the query logic as needed to fit your specific requirements.