React Material-UI Autocomplete customize `no options` text

Question

I'm looking at this example of Autocomplete provided by MaterialUI

https://codesandbox.io/s/81qc1

I was wondering how I can display a "No options found" message if no results are found.

Possessory

Answer 1

Use props noOptionsText for Material-UI Autocomplete

Text to display when there are no options. For localization purposes, you can use the provided translations.

• Ref: Document of Autocomplete API

import Autocomplete from '@material-ui/lab/Autocomplete';

<Autocomplete
  noOptionsText={'Your Customized No Options Text'}
  ...
/>

Mychael

Is there any option if I don't want to show the noOption popper? If I set it to null or false it still shows blank popper – Peeved

@Peeved Maybe you could add a js conditional style to the dropdown area via its className (using MUI style nesting selector). – Mychael

@Mychael could you elaborate of how that would work? Maybe even show an example? – Pastiche

Answer 2

For those who don't want "No options" to show up at all,

<Autocomplete freeSolo />

Belter

Mister, you deserve a bag of cookies! – Nearly

This is exactly what I wanted, so THANKS!!!!!!!!! Also instead of true, I added a condition to not show this before 6 characters to fetch the option list. Basically show it after I really know there are no options. – Similitude

Omg, i got what i needed, thanks a million!!! – Waylay

You don't need to set true. freeSolo is enough – Christiansand

Chocolate chip cookies – Brindled

No longer supported: codesandbox.io/s/elated-goodall-f4vn9w?file=/src/Demo.tsx This works tho: codesandbox.io/s/elated-goodall-f4vn9w?file=/src/Demo.tsx – Outstation

Answer 3

You can use a combination of a conditional on freeSolo and the noOptionsText field... like so:

<Autocomplete
    freeSolo={inputValue?.length ? false : true}
    loading={isMatchingUsersLoading}
    loadingText={"Searching..."}
    options={matchingUsers}
    noOptionsText={"No matches..."}
    .... 
/>

This will keep the 'empty box' from showing up AND still give you the noOptionsText and the loading text at appropriate times.

Possess

Answer 4

In the documentation looking for noOptionsText prop: https://material-ui.com/api/autocomplete/

Devilry

Answer 5

const theme = createTheme(
  {
    components: {
      MuiAutocomplete: {
        defaultProps: {
          noOptionsText: 'any text you want',
        },
      },
    },
  }
);

Donnie

Reviewed it in low quality answers queue. While it's code-only, in my opinion it's also self explanatory – Gyno

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. – Limeade

Answer 6

This my solution for removing the No Options text without freeSolo:

PaperComponent={({ children }) => {
  let hasOptions = true

  if (React.isValidElement(children)) {
    const { className } = children.props
    hasOptions = className !== "MuiAutocomplete-noOptions"
  }

  return (
    <Paper>
      {hasOptions && children}
    </Paper>  
  )
}}

What we're doing here is simply removing the only listed item from children which is the element with the text No Options. If there is no class by this string then children will be presented as normal.

Sawmill

Answer 7

I would recommend you to check this link for fast and easy Autocomplete implementation. But if you want to build your own Autocomplete component using useAutocomplete check this

Pituitary