Skip to main content

ArticleSearchState

Debounced search across published public articles. The class handles the throttle (300ms by default) and ignores stale responses — drive it from a live $state bound to your input.

Usage

src/lib/components/SearchBar.svelte
<script>
  import { onDestroy } from 'svelte';
  import { ArticleSearchState } from '@cstar.help/svelte';

  const search = new ArticleSearchState();
  let query = $state('');

  $effect(() => {
    search.search(query);
  });

  onDestroy(() => search.destroy());
</script>

<input bind:value={query} placeholder="Search help…" />

{#if search.isLoading}
  <p>Searching…</p>
{:else}
  <p>{search.totalCount} results</p>
  <ul>
    {#each search.results as a (a.id)}
      <li><a href="/help/{a.slug}">{a.title}</a></li>
    {/each}
  </ul>
{/if}

Reactive fields

  • search.results — array of matches with highlighted excerpts.
  • search.totalCount — total matches.
  • search.isLoading — true during the debounce window.
  • search.error — Error | null.

Next up