metropolitan-bronze•11mo ago

MuiAutocomplete narrowing options

Hello, I have troubles to make MuiAutocomplete according to your documentation. In my App it doesn't trigger searching the Autocomplete to narrow options. Thats my code, Its 1-1 from your example where it's working (except the resource name and option label). https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete/#how-do-i-use-it-with-crud-components-and-useform

const { autocompleteProps: platformAutocompleteProps } = useAutocomplete({
  resource: "platforms",
});

<Controller
      control={control}
      name="platform"
      render={({ field }) => (
        <Autocomplete
          {...platformAutocompleteProps}
          {...field}
          onChange={(_, value) => {
            field.onChange(value);
          }}
          getOptionLabel={({ name }) => name}
          isOptionEqualToValue={(option, value) =>
            value === undefined ||
            option?.id?.toString() === (value?.id ?? value)?.toString()
          }
          renderInput={(params) => (
            <TextField
              {...params}
              label="Platform"
              margin="normal"
              variant="outlined"
              error={!!errors.platform}
              helperText={<>{errors.platform?.message}</>}
            />
          )}
        />
      )}
    />

const { autocompleteProps: platformAutocompleteProps } = useAutocomplete({
  resource: "platforms",
});

<Controller
      control={control}
      name="platform"
      render={({ field }) => (
        <Autocomplete
          {...platformAutocompleteProps}
          {...field}
          onChange={(_, value) => {
            field.onChange(value);
          }}
          getOptionLabel={({ name }) => name}
          isOptionEqualToValue={(option, value) =>
            value === undefined ||
            option?.id?.toString() === (value?.id ?? value)?.toString()
          }
          renderInput={(params) => (
            <TextField
              {...params}
              label="Platform"
              margin="normal"
              variant="outlined"
              error={!!errors.platform}
              helperText={<>{errors.platform?.message}</>}
            />
          )}
        />
      )}
    />

useAutocomplete | refine

useAutocomplete hook allows you to manage Material UI's `` component when records in a resource needs to be used as select options.

4 Replies

kapa.ai•11mo ago

Hi @sensib0i. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- From the information provided, it seems like you're using the useAutocomplete hook correctly. However, there are a few things you might want to check: 1. Data Provider: The useAutocomplete hook uses the getList function from your data provider to fetch the options. Make sure your data provider is set up correctly and the getList function is working as expected. You can check this by logging the output of the getList function. 2. Search Parameter: By default, refine uses the useList hook and passes it to the search parameter. If you're having issues, you should check your getList function in your Data Provider. If you want to change this behavior to make client-side filtering, you can examine this documentation (https://mui.com/material-ui/react-autocomplete/#search-as-you-type). 3. Resource Name: Ensure that the resource name you're passing to useAutocomplete ("platforms" in your case) matches the one in your data provider. 4. Option Label: The getOptionLabel function should return the label for each option. Make sure the field you're using (name in your case) exists in the data returned by your getList function. If you've checked all of these and you're still having issues, it might be helpful to provide more information about the error you're encountering or any console logs you might have. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@667849704293269515> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-rose•11mo ago

Hello @sensib0i is your problem resolved?

metropolitan-bronze•11mo ago

Yeah i resolved it. Thank you In your documentation it is not using onSearch but at demo it works Thats why i misunderstood it