Live Components

src/Twig/SearchPackages.php

// ... use statements hidden - click to show use App\Service\PackageRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;
#[AsLiveComponent()]
class SearchPackages
{
    use DefaultActionTrait;

    #[LiveProp(writable: true)]
    public ?string $query = null;

    public function __construct(private PackageRepository $packageRepo)
    {
    }

    public function getPackages(): array
    {
        return $this->packageRepo->findAll($this->query);
    }
}

templates/components/SearchPackages.html.twig

<div{{ attributes }}>
    <input
        type="text"
        data-model="query"
        placeholder="Results update as you type..."
        class="form-control"
    >

    {% if computed.packages|length > 0 %}
        <div data-loading="addClass(opacity-50)" class="mt-3 row">
            {% for package in computed.packages %}
                {{ include('main/_package_in_list.html.twig') }}
            {% endfor %}
        </div>
    {% else %}
        <div class="pt-3">Ah! No packages found matching "{{ query }}"</div>
    {% endif %}
</div>