You don't need a JS Framework to create a reactive component
See for yourself bellow an implementation for a real-time search component
use Drupal\wire\View;
use Drupal\wire\WireComponent;
#[WireComponent(id: 'articles_demo_search')]
class ArticlesDemoSearch extends WireComponent {
public string $search = '';
public function render(): ?View {
return View::fromTpl('articles_demo_search', [
'items' => $this->getArticles(),
]);
}
private function getArticles(): array {
$nodeStorage = \Drupal::entityTypeManager()->getStorage('node');
$query = $nodeStorage->getQuery()->accessCheck(TRUE)
->condition('type', 'article')
->condition('status', 1)
->condition('title', '%' . addcslashes($this->search, '\%_') . '%', 'LIKE')
->range(0, 5);
return array_map(function ($article) {
return $article->toLink();
}, $nodeStorage->loadMultiple($query->execute()));
}
}
<div>
<input
wire:model="search"
type="search"
placeholder="Search by title..."
>
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</div>