foreign-sapphire•2mo ago

useAutocomplete onSearch: undefined is not being applied

I am using the useAutocomplete hook to populate a MUI Autocomplete field. I want to disable server-side filtering, having only a couple of options. From documentation, i should pass an undefined onSearch to the hook (like the example below), but even with this, when I type in the autocomplete a request is still made to the server. How do i completely make the autocomplete client-side instead ok letting it make requests?

const { autocompleteProps } = useAutocomplete({
    resource: "testResource",
    pagination: {
        mode: "off",
    },
    onSearch: undefined,
});

const { autocompleteProps } = useAutocomplete({
    resource: "testResource",
    pagination: {
        mode: "off",
    },
    onSearch: undefined,
});

2 Replies

kapa.ai•2mo ago

Hi @Vargash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make the Autocomplete component completely client-side and prevent server requests when typing, you need to make a few adjustments to your implementation. Based on the information from the knowledge sources, here's how you can achieve this: 1. Set onSearch: undefined in the useAutocomplete hook, as you've already done. 2. Implement client-side filtering using MUI's createFilterOptions function. 3. Override the onInputChange prop to prevent server requests. Here's an example of how you can modify your code:

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

const { autocompleteProps } = useAutocomplete({
  resource: "testResource",
  pagination: {
    mode: "off",
  },
  onSearch: undefined,
});

const filterOptions = createFilterOptions({
  matchFrom: "start",
  stringify: (option: any) => option.title, // Adjust this based on your option structure
});

return (
  <Autocomplete
    {...autocompleteProps}
    getOptionLabel={(item) => item.title} // Adjust this based on your option structure
    onInputChange={(event, value) => {}} // This prevents server requests
    filterOptions={filterOptions}
    isOptionEqualToValue={(option, value) =>
      value === undefined ||
      option?.id?.toString() === (value?.id ?? value)?.toString()
    }
    renderInput={(params) => (
      <TextField
        {...params}
        label="Your Label"
        margin="normal"
        variant="outlined"
      />
    )}
  />
);

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

const { autocompleteProps } = useAutocomplete({
  resource: "testResource",
  pagination: {
    mode: "off",
  },
  onSearch: undefined,
});

const filterOptions = createFilterOptions({
  matchFrom: "start",
  stringify: (option: any) => option.title, // Adjust this based on your option structure
});

return (
  <Autocomplete
    {...autocompleteProps}
    getOptionLabel={(item) => item.title} // Adjust this based on your option structure
    onInputChange={(event, value) => {}} // This prevents server requests
    filterOptions={filterOptions}
    isOptionEqualToValue={(option, value) =>
      value === undefined ||
      option?.id?.toString() === (value?.id ?? value)?.toString()
    }
    renderInput={(params) => (
      <TextField
        {...params}
        label="Your Label"
        margin="normal"
        variant="outlined"
      />
    )}
  />
);

This implementation should prevent server requests and perform filtering entirely on the client-side. The key changes are: 1. Using createFilterOptions to define custom filtering logic. 2. Overriding onInputChange with an empty function to prevent default behavior. 3. Applying the custom filterOptions to the Autocomplete component. For more details on this approach, you can refer to the useAutocomplete API Reference and the section on Client-side filtering. If you're still experiencing issues with server requests after implementing these changes, it might be worth checking other parts of your application that could be triggering these requests, or consulting the refine documentation for any recent updates or changes to this behavior. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@171884471849713664> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

useAutocomplete onSearch: undefined is not being applied

Did you find this page helpful?