43 lines
1.2 KiB
React
43 lines
1.2 KiB
React
|
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;
|