Question: How to provide dynamic data to combobox? about svelte-headlessui HOT 5 OPEN

Great question! Off the top of my head I can't think of anywhere I've used dynamic data like this ... well, I have data loaded, but it's effectively static to the control. You're really talking about using it for a possibly unbounded set of data (or more than you'd want to load and have in memory upfront).

I'll have a think about the best way to do it. I'd imagine having some function you can pass to the control factory to fetch the data is what's needed.

from svelte-headlessui.

Yeah, I meant a subset from a potentially larger set (the unbounded).

I'd probably include some form of virtualization for the list too, as you may have many more entries in a result than you want to load / render unless and until someone scrolls.

from svelte-headlessui.

The solution I'm using basically just hijacks the input change option in a search input and feeds the subsequent results in to the combobox, while providing my own logic for the isOpen state.

<script lang="ts">
  const combobox = createCombobox();
  let searchPromise: Promise<void>;
  let query: string;
  let searchResults: any[];

  async function search() {
    try {
      const result = await fetch(
        `${import.meta.env.VITE_API_BASE_URL}/api/v1/search?query=${query}`
      );
      searchResults = await result.json();
    }
  }
</script>

<input
  type="search"
  name="search"
  use:combobox.input
  on:input={() => {
    searchPromise = search();
  }}
  on:select={onSelect}
  on:keydown={scrollToActiveItem}
  bind:value={query}
/>
{#if Boolean(query)}
  <!-- optionally await searchPromise -->
  <ul
    use:combobox.items
  >
    {#each searchResults as result}
      {@const active = $combobox.active === result}
      <li
        <!-- optional custom active classes -->
        use:combobox.item={{ value: result }}
      >
        {result.toString()}
      </li>
    {/each}
  </ul>
{/if}

from svelte-headlessui.

That seems to be the approach used in simple-svelte-autocomplete which seems to work fairly well. Although it's overloaded with more functionality than I need.

Also, I wouldn't include "unbounded sets" of data in the requirement since pulling in the top 10-20 items is all I'm interested in.

from svelte-headlessui.

Try this:

1. Create derived store for the filter (this is so it can react when the filter part changes, not when any other state changes):

const combobox = createCombobox()
const filter = derived(combobox, $combobox => $combobox.filter)

2. Use that filter store to trigger the data fetch:

let filtered: any[] = []

$: fetchData($filter)

async function fetchData(filter: string) {
  if (browser) {
    const q = filter.toLowerCase().replace(/\s+/g, '')
    const resp = await fetch('/api/data?q=' + q)
    const data = await resp.json()
    filtered = data
  }
}

3: Use the filtered array to render the combobox items:

{#each filtered as value}
...
{/each}

from svelte-headlessui.