Multiselect: how to load contact prefiltered using ajax / serverless?

Developer Support CMS Development
,
1

I am making a customized ui extension (a react card project)

I need user to choose multiple contacts of the company actually showed

So I would like a MultiSelect component, but we cannot pre-load 10k contacts.

Can I intercept the user when enter chars and then change options based on result of a serverless?

2

I don’t know about serverless, as I’ve never worked with it. However, I think you need to reason with yourself a little more to ensure the component is doing what you want it to do.

On render, you don’t want to fetch 10k contacts to populate the multi-select component. I don’t know what the end goal is, but I’d suggest that you build a search component to fetch the data based on the user inputs, then use the search results to populate the multi-select, and then do whatever you need with the selected contacts.

For the search component, I’d imagine it’ll look something like:

import { useEffect, useState } from 'react'

// searchResult and setSearchResult are props from the parent component.
export default function searchContacts( {searchResult, setSearchResult} ) {
 const [searchQuery, setSearchQuery] = useState['']

 const getContacts = async (searchQuery) => {
 const searchUrl = searchQuery
 const res = await fetch(searchUrl)

 if(!res.ok) {
 // handle res error
 }

 const contacts = await res.json()
 return contacts
 }

 const handleSearchQuery = async (searchQuery) => {
 getContacts(searchQuery).then((data) => {
 setSearchResult(data)
 }).catch((error) => {
 // handle error
 })
 }

 useEffect(()=> {
 let mounted = true

 // might want to check for key inputs before calling fn below
 handleSearchQuery(searchQuery)

 return(()=>{
 mounted = false
 })
 })[searchQuery]

 return(
 <input
 type="search"
 name="search-contact"
 id="search-contact"
 className="search-contact"
 onChange={(e) => setSearchQuery(e.target.value)}
 placeholder="Search contact"
 />
 )
}

You can then use the ‘searchResult’ to populate the multi-select component.
Hope that helps