Live Search

How it works — View Source

import { signal, effect } from 'tina4js';
import { api } from 'tina4js/api';

const query = signal('');
const results = signal([]);
const loading = signal(false);

// Debounced search effect
effect(() => {
  const q = query.value;
  if (!q) { results.value = []; return; }
  loading.value = true;
  const timer = setTimeout(async () => {
    const data = await api.get('/search', { params: { q } });
    results.value = data;
    loading.value = false;
  }, 300);
  return () => clearTimeout(timer); // cleanup on re-run
});