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

[realtebo]

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?

[vsnguy3n · Accepted solution]

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