CODEWITHSUNDEEP
javascripthtmlreactjsmaterial-ui
shxpark
shxpark

Reputation: 347

React Material-UI Autocomplete customize `no options` text

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.

Upvotes: 28

Views: 41612

Answers (8)

HuSaad
HuSaad

Reputation: 210

for those who are expanding the paper component and want to remove the no option

    PaperComponent={({ children }: any) => (
              <Paper>
                {Array.isArray(children.props.children) && children}
                {children && !Array.isArray(children.props.children) && (
                  <Button
                    color="primary"
                    fullWidth
                    sx={{ justifyContent: 'flex-start', pl: 2 }}
                    onMouseDown={() => {
                      dialog.onTrue();
                      // navigate(`${window.location.pathname}?name=${searchedCompany}`);
                      alert('heu');
                    }}
                  >
                    + Can’t Find What You’re Looking For? Create “Triple C”
                  </Button>
                )}
              </Paper>
            )}

Upvotes: 0

Maximilian
Maximilian

Reputation: 537

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.

Upvotes: 0

lowcrawler
lowcrawler

Reputation: 7599

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.

Upvotes: 6

d4cho
d4cho

Reputation: 377

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

<Autocomplete freeSolo />

Upvotes: 36

Minh Tấn Vi
Minh Tấn Vi

Reputation: 1

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

Upvotes: 0

keikai
keikai

Reputation: 15176

Use props noOptionsText for Material-UI Autocomplete

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

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

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

enter image description here

Upvotes: 51

Geovani Santos
Geovani Santos

Reputation: 391

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

Upvotes: 1

Maksym Bezruchko
Maksym Bezruchko

Reputation: 1258

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

Upvotes: -1

Related Questions