web-base/react/shared/elements/search-field.js
2024-04-07 14:23:59 +02:00

27 lines
823 B
JavaScript

import {Autocomplete, TextField} from "@mui/material";
import useAsyncSearch from "../hooks/async-search";
export default function SearchField(props) {
const { onSearch, onSelect, ...other } = props;
const [searchString, setSearchString, results] = useAsyncSearch(props.onSearch, 3);
return <Autocomplete {...other}
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',
}}
/>
)}
/>;
}