Autocomplete stops

sncf-station/src/AutocompleteStop.jsx

@@ -0,0 +1,42 @@
+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 => option.id.startsWith("IDFM") ? "Transilien" : "TER/TGV/Intercités"}
+      isOptionEqualToValue={(option, value) => option.id === value.id}
+      renderInput={(params) => <TextField {...params} label="Arrêt" />}
+      {...params} />
+  </>
+}
+
+export default AutocompleteStop;