Wire Drupal logo

Component-based dynamic interfaces for Drupal

Try Wire Drupal GPT to generate Wire components

------

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",
 *   label = @Translation("Articles Demo Search"),
 * )
 */
class ArticlesDemoSearch extends WireComponent {

  public string $search = '';

  public function render(): ?View {

    $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 View::fromTpl('articles_demo_search', [
      'items' => 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>

The result

********************************** ************************* ************************ **************** ****************** *********** ************** ************* ************ *************