AutoComplete ComboBox with remote data (Fluent UI v9 React Components)
In a recent project I had the challenge to find a way to load data for a Fluent React UI v9 ComboBox dynamically. But due to the data amount I could not load all data at once. I had to wait after the user entered some text in the ComboBox. I had to use the the entered text as filter value for the REST call - like ?$filter=contains(...) To solve this I hooked into the "onChange" CombBox event. When the user is entering text, I use the text and call a REST endpoint to fetch the data. The following code snippets shows the main implementation: return ( <div className={styles.root}> <label id={comboId}>Account</label> <Combobox onOptionSelect={onOptionSelect} aria-labelledby={comboId} placeholder="Select a user" onChange={async (ev) => { // You can change the check of length and start later - e. g. after 3 chars if (ev.target.value.length > 0) { setQuery(ev.targe...
