trainvel/sncf-station/src/AutocompleteStop.jsx

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

function AutocompleteStop(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/gtfs/stop/?location_type=1&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) {
  switch (option.transport_type) {
    case "TGV":
    case "IC":
    case "TER":
      return "TGV/TER/Intercités"
    case "TN":
      return "Transilien"
    case "ES":
      return "Eurostar"
    case "TI":
      return "Trenitalia France"
    case "RENFE":
      return "RENFE"
    case "OBB":
      return "ÖBB"
    default:
      return option.transport_type
  }
}

export default AutocompleteStop;