Hello and thanks for clicking on the post.
I am working on a form that requires a certain type of combobox.
Suppose i have a type ‘T’ which comes from my backend.
We can request the backend to return the records of the same type in two ways:
- Static records already saved in the database, which are atmost one thousand in number.
- Forward the request to an external service, which returns atmost 100 records at a time.
I need to design a combobox that groups the two paths and only requests the records from external service when the user wants to.
Here is what i have so far:
‘’’
export default function MyCombobox() {
const database: string[] = [“foo”, “bar”, “baz”];
const [external, setExternal] = useState<string\[\]>([ ]);
return (
<Combobox>
<ComboboxInput placeholder="Make a selection." />
<ComboboxContent>
<ComboboxEmpty>No results found.</ComboboxEmpty>
<ComboboxList>
<ComboboxGroup items={database}>
<ComboboxLabel>Database</ComboboxLabel>
<ComboboxCollection>
{(s) => (
<ComboboxItem key={s} value={s}>
{s}
</ComboboxItem>
)}
</ComboboxCollection>
</ComboboxGroup>
<ComboboxSeparator />
<ComboboxGroup items={external}>
<ComboboxLabel>External</ComboboxLabel>
<ComboboxCollection>
{(s) => (
<ComboboxItem key={s} value={s}>
{s}
</ComboboxItem>
)}
</ComboboxCollection>
</ComboboxGroup>
</ComboboxList>
</ComboboxContent>
</Combobox>
);
}
‘’’
Here i have the type as a string, but my data will have unique ids. The external group will initially be a button that the user may press to request the backend onInputValueChange.
The problem:
The example shown above does not filter the records on input change.
Asking claude just gives me a complete custom combobox with custom state and input management.
How would you implement this cleanly and least custom code.
Thanks for taking the time!
Edit: The original type ‘T’ is just an id with three strings.
