javascript React-Mui-自动完成功能无法正常工作

yvfmudvl  于 2022-12-21  发布在  Java
关注(0)|答案(1)|浏览(141)

mui autocomplete不能一个字母一个字母的顺序完成文本有点乱,有人有更好的autocomplete?或者知道如何修复?(例如键入“l”会发现第一个“agropoli”比“伦敦”)

<Autocomplete
        id="free-solo-demo"
        freeSolo
        options={cityUniqe}
        onChange={(event, value) => setSearch(value)}
        renderInput={(params) => (
          <TextField
            {...params}
            error={weatherData?.error ? true : false}
            fullWidth
            label="name your city here..."
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
            }}
            ref={inputField}
            onKeyDown={(e) => e.key === "Enter" && handleSubmit(e)}
          />
        )}
      />
pftdvrlh

pftdvrlh1#

您需要稍微处理引擎盖下发生的过滤,Mui提供了一个createFilterOptions方法,您可以使用如下:

import { Autocomplete, TextField, createFilterOptions } from "@mui/material";

export default function App() {

// create your filer options here
  const filterOptions = createFilterOptions({
    matchFrom: "start",
    stringify: (option) => option
  });
  
  return (
    <Autocomplete
      id="free-solo-demo"
      freeSolo
      options={["agropoli", "london", "parlament"]}
      filterOptions={filterOptions} // use them here
      onChange={(event, value) => setSearch(value)}
      renderInput={(params) => (
        <TextField
          {...params}
          error={weatherData?.error ? true : false}
          fullWidth
          label="name your city here..."
          value={search}
          onChange={(e) => {
            setSearch(e.target.value);
          }}
          ref={inputField}
          onKeyDown={(e) => e.key === "Enter" && handleSubmit(e)}
        />
      )}
    />
  );
}

相关问题