on-search-live-preview

http://localhost:3000

import { useAutocomplete } from "@refinedev/mui";
import { Autocomplete, TextField } from "@mui/material";

interface ICategory {
    id: number;
    title: string;
}

const PostCreate: React.FC = () => {
    const { autocompleteProps } = useAutocomplete<ICategory>({
        resource: "categories",
        onSearch: (value) => [
            {
                field: "title",
                operator: "contains",
                value,
            },
        ],
    });

    return (
        <Autocomplete
            {...autocompleteProps}
            getOptionLabel={(item) => item.title}
            isOptionEqualToValue={(option, value) =>
                value === undefined || option.id.toString() === value.toString()
            }
            placeholder="Select a category"
            renderInput={(params) => (
                <TextField
                    {...params}
                    label="Category"
                    margin="normal"
                    variant="outlined"
                    required
                />
            )}
        />
    );
};