Question

我正在使用材料ui自动完成功能。

 <Autocomplete
    multiple
    id="tags-outlined"
    options={options}
    getOptionLabel={(option) => option && option.name}
    value={catArray}
    onChange={handleCategoryFilter}
    filterSelectedOptions
    renderInput={(params) => (
     <TextField
      {...params}
      variant="outlined"
      placeholder="Categories"
     />
    )}
/>

首先，我希望所选值不显示在选项中；其次，我想清除自动完成功能。你能指导我如何做这些事情吗？

我正在通过setCatArray([])清除值，但这不是可行的

Answer 1

您可以使用材料ui自动完成的默认属性filterSelectedOptions。如果为true，它将隐藏列表框中的选定选项。

要清除自动完成的值，它会在选择框的末尾提供默认的清除图标。您可以从那里清除它。

尝试我的沙盒link。也可以尝试一些更重要的ui演示here。

UPDATE：如果要管理清算值，可以使用自动完成的value属性，并通过更新其值在onchange中对其进行管理。

 <Autocomplete
    multiple
    id="tags-outlined"
    options={top100Films}
    value={values}
    getOptionSelected={(option, value) => value.title === option.title}
    getOptionLabel={(option) => option.title}
    filterSelectedOptions
    onChange={(e, valueTags) => {
      e.preventDefault();
      const valuesArray = [];
      valueTags.forEach((valueTag) => {
        valuesArray.push({
          title: top100Films
            .filter((tag) => valueTag.title === tag.title)
            .shift().title
        });
      });
      setValues(valuesArray);
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        variant="outlined"
        label="filterSelectedOptions"
        placeholder="Favorites"
      />
    )}
  />

Answer 2

您是否尝试过将autocomplete=false添加到组件的属性列表中？

Answer 3

如果要从自动完成中筛选出选定的选项。将filterSelectedOptions={true}传递到您的组件

第二，您可以通过控制所选值并将其设置为空数组来清除该值。这是我完整的示例

const options = ["one", "two", "three", "four"];

export default function MyAutocomplete() {
  const [values, setValues] = React.useState<string[]>([]);
  const onChange = (_, value) => {
    setValues(value);
  };
  const clearSelected = () => {
    setValues([]);
  };

  return (
    <>
      <button onClick={clearSelected}>Clear selected</button>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={options}
        getOptionLabel={(option) => option}
        value={values}
        onChange={onChange}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField {...params} variant="outlined" placeholder="Categories" />
        )}
      />
    </>
  );
}

实时示例

Answer 4

    const options = ["one", "two", "three", "four"];

export default function MyAutocomplete() {
  const [values, setValues] = React.useState([]);
  const onChange = (_, value) => {
    setValues(value);
  };
  const clearSelected = () => {
    setValues([]);
  };

  return (
    <>
      <button onClick={clearSelected}>Clear selected</button>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={options}
        getOptionLabel={(option) => option}
        value={values}
        onChange={onChange}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField {...params} variant="outlined" placeholder="Categories" />
        )}
      />
    </>
  );
}

如何清除自动完成值

4 个答案:

实时示例