Question 298513 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Material ui autocomplete – empty placeholder

I am using material ui autocomplete in my project.

The option list is empty initially and on input change, the list will be populated.
So during the initial empty state, i need to show the placeholder like this in the options area.
enter image description here

On searching i found only the placeholder being populated in the input area( attached image) and not in the option list area.

enter image description here

Any idea on how to achieve this?

Tags:

2

Answers


  1. 0

    You can use the noOptionsText property of the Autocomplete component to achieve that. You can use it like this noOptionsText="Type to search". Note that it will show "Type to search" even when you have something typed and it has no result. To solve that you can conditionally add value in noOptionsText.

    In the below example I set value as "Type to search" when there is no input value. And I show "No result" otherwise.

    You can check the sandbox here: https://codesandbox.io/p/sandbox/vigorous-meadow-dsdlm5

    <Autocomplete
        disablePortal
        id="combo-box-demo"
        options={inputValue ? top100Films : []}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
        inputValue={inputValue}
        onInputChange={(event) => {
          console.log(event?.target?.value);
          if (event?.target?.value) {
            setInputValue(event.target.value);
          } else {
            setInputValue("");
          }
        }}
        noOptionsText={inputValue ? "No result" : "Type to search"}
/>
    Login or Signup to reply.
  2. 0

    You can do this by specifying the value of the label property on the TextField component.

    <TextField
      label="Choose a country"
    />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search