Comments (5)
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:
- 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)
- 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.
Related Issues (20)
- What is Selctor.svelte, Check.slte in ListBox example? HOT 3
- Safari: Modal breaks when clicking outside of modal to close HOT 2
- Feature request: dispatch event according actions for easier integration with other libraries HOT 2
- Feature request: possibility to add an image to combobox HOT 2
- Multiple selection for ListBox HOT 1
- Disclosure Accessibility isues: missing some or all of the required children HOT 2
- Bug: Combobox trapping focus HOT 1
- Bug: Dragging (selecting text) from inside dialog to outside of dialog causes dialog to close HOT 3
- Bugs in some of the documentation examples HOT 1
- Tab Components HOT 3
- Error when attempting to clear the input of the combobox after selection HOT 2
- Use SvelteKit powered docs site HOT 1
- How to prevent autoclose menu after selecting option? HOT 1
- Docs: hovering text triggers hover effect on all links HOT 2
- Combobox with Multi-Select / Focus
- User specified `id` on combobox list item causes infinite loop HOT 1
- Using a keyed each for the combobox options breaks direction order after filtering
- How am I supposed to get the value from this component? HOT 2
- Add a createTooltip action?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-headlessui.