DeveloperBreeze

Reactive Components Development Tutorials, Guides & Insights

Unlock 1+ expert-curated reactive components tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your reactive components skills on DeveloperBreeze.

Implementing Real-Time Search with Livewire in Laravel

Tutorial August 14, 2024
javascript php

Next, create the Blade view for this component in resources/views/livewire/search-posts.blade.php.

<div>
    <!-- Search Input -->
    <input type="text" placeholder="Search posts..." wire:model="query" class="border rounded p-2 w-full">

    <!-- Search Results -->
    @if(!empty($posts))
        <ul class="mt-4">
            @foreach($posts as $post)
                <li class="p-2 border-b">{{ $post->title }}</li>
            @endforeach
        </ul>
    @elseif(strlen($query) > 0)
        <p class="mt-4 text-gray-500">No results found for "{{ $query }}".</p>
    @endif
</div>

Read More