Material Ui 5 自动完成不返回过滤选项

发布于 2025-01-14 15:11:10 字数 1826 浏览 3 评论 0原文

我使用的是material ui V5，

由于自动完成中的默认过滤没有给出正确的结果数组，我编写了自己的filterOptions函数。

const filterOpt = (options, state) => {
 let result = options.filter(option => option.name.includes(state.inputValue))
 return result }

从函数返回的结果正是我想要的。但我仍然可以看到不需要的选项。

这是我的自动完成组件：

<StyledAutocomplete
    disabled={disabled}
    id="field1"
    getOptionLabel={(option) => option.name || ""}
    isOptionEqualToValue={(option, value) => option.id === value.id}
    value={values[prop] || ""}
    noOptionsText={"No options found"}        
    options={data}
    style={{ width: "100%" }}
    PopperComponent={PopperMy}
    PaperComponent={CustomPaper}
    onChange={(event, newValue) =>
      setValues({ ...values, [prop]: newValue })
    }
    filterOptions={(options, state) => filterOpt(options, state)}
    renderInput={(params) => {
      const inputProps = params.inputProps;
      inputProps.autoComplete = "new-password";
      return (
        <StyledTextField
          {...params}
          inputProps={{
            ...params.inputProps,
            autoComplete: "new-password",
          }}
          name="field1"
          id="field1"
          autoComplete="off"
          type="text"
          label=""
          variant="outlined"
          error={error && !values[prop]}
          helperText={error && errorStatus ? errorTexts[prop] : ""}
        />
      );
    }}
  />

以下是过滤后我看到的选项

以下是从函数返回的结果数组：

是否有任何解决方案可以显示精确的过滤数组用户？

原文

I am using material ui V5,

Due to the default filtering in Autocomplete does not give proper result array, l have written my own filterOptions function.

const filterOpt = (options, state) => {
 let result = options.filter(option => option.name.includes(state.inputValue))
 return result }

The result returning from the function is exactly what l want. But still, l can see the undesired options.

Here is my Autocomplete component :

<StyledAutocomplete
    disabled={disabled}
    id="field1"
    getOptionLabel={(option) => option.name || ""}
    isOptionEqualToValue={(option, value) => option.id === value.id}
    value={values[prop] || ""}
    noOptionsText={"No options found"}        
    options={data}
    style={{ width: "100%" }}
    PopperComponent={PopperMy}
    PaperComponent={CustomPaper}
    onChange={(event, newValue) =>
      setValues({ ...values, [prop]: newValue })
    }
    filterOptions={(options, state) => filterOpt(options, state)}
    renderInput={(params) => {
      const inputProps = params.inputProps;
      inputProps.autoComplete = "new-password";
      return (
        <StyledTextField
          {...params}
          inputProps={{
            ...params.inputProps,
            autoComplete: "new-password",
          }}
          name="field1"
          id="field1"
          autoComplete="off"
          type="text"
          label=""
          variant="outlined"
          error={error && !values[prop]}
          helperText={error && errorStatus ? errorTexts[prop] : ""}
        />
      );
    }}
  />

Here are the options that l see after filtering