web-base/react/shared/elements/search-field.js

28 lines
882 B
JavaScript
Raw Normal View History

2024-04-02 15:33:00 +02:00
import {Autocomplete, TextField} from "@mui/material";
import useAsyncSearch from "../hooks/async-search";
export default function SearchField(props) {
const { onSearch, displayText, onSelect, ...other } = props;
const [searchString, setSearchString, results] = useAsyncSearch(props.onSearch, 3);
return <Autocomplete {...other}
getOptionLabel={r => displayText(r)}
options={Object.values(results ?? {})}
onChange={(e, n) => onSelect(n)}
renderInput={(params) => (
<TextField
{...params}
value={searchString}
onChange={e => setSearchString(e.target.value)}
label={"Search input"}
InputProps={{
...params.InputProps,
type: 'search',
}}
/>
)}
/>;
}