trainvel/src/AutocompleteStation.jsx

import {Autocomplete, TextField} from "@mui/material";
import {useRef, useState} from "react";

function AutocompleteStation(params) {
  const [options, setOptions] = useState([])
  const previousController = useRef()

  function onInputChange(event, value) {
    if (!value) {
      setOptions([])
      return
    }

    if (previousController.current)
      previousController.current.abort()

    const controller = new AbortController()
    const signal = controller.signal
    previousController.current = controller
    fetch("/api/core/station/?search=" + value, {signal})
      .then(response => response.json())
      .then(data => data.results)
      .then(setOptions)
      .catch()
  }

  return <>
    <Autocomplete
      id="stop"
      options={options}
      onInputChange={onInputChange}
      filterOptions={(x) => x}
      getOptionKey={option => option.id}
      getOptionLabel={option => option.name}
      groupBy={option => getOptionGroup(option)}
      isOptionEqualToValue={(option, value) => option.id === value.id}
      renderInput={(params) => <TextField {...params} label="Arrêt" />}
      {...params} />
  </>
}

function getOptionGroup(option) {
  return option.country
}

export default AutocompleteStation;