在 Material UI 自动完成中的 Textfield 输入中显示匹配搜索选项的数量

Question

我正在尝试自定义 Material UI 自动完成并在用户搜索并在搜索框中输入字符串后显示当前显示在 Popper 菜单中的选项计数（这是在您选择一个选项之前，它变成value 很容易用value.length 计算）。当用户在 renderInput 的 <Textfield/> 中输入击键时，我可能会丢失该道具，以便从整个选项数组中获取选项的数量显示 <Autocomplete/> .

代码如下：

 <Autocomplete
        value={value}
        onClose={handleClose}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        options={options}
        getOptionLabel={option => option.title}
        renderInput={params => (
          <React.Fragment>
            <TextField
              {...params}
              variant="underlined"
              placeholder="Search"
            />
            <span className={classes.visibleFilterNum}>
              Showing X of {options.length}
            </span>
          </React.Fragment>
        )}
      />

这是目前为止的组件，需要不断更新显示选项总数 X 的计数

这里是从 Material UI 示例文档中提取的 codepen of something similar，作为起始代码集的更好示例

Answer 1

使用useAutocomplete 挂钩很简单，因为它公开了groupedOptions 变量（即filtered options）。

这是一个例子：

export default function UseAutocomplete() {
  const classes = useStyles();
  const {
    getRootProps,
    getInputLabelProps,
    getInputProps,
    getListboxProps,
    getOptionProps,
    groupedOptions
  } = useAutocomplete({
    id: "use-autocomplete-demo",
    options: top100Films,
    getOptionLabel: (option) => option.title
  });

  return (
    <div>
      <div {...getRootProps()}>
        <label className={classes.label} {...getInputLabelProps()}>
          useAutocomplete
        </label>
        <input className={classes.input} {...getInputProps()} />
      </div>
      {groupedOptions.length > 0 ? (
        <>
          <div>
            Showing {groupedOptions.length} of {top100Films.length}
          </div>
          <ul className={classes.listbox} {...getListboxProps()}>
            {groupedOptions.map((option, index) => (
              <li {...getOptionProps({ option, index })}>{option.title}</li>
            ))}
          </ul>
        </>
      ) : null}
    </div>
  );
}

---

groupedOptions 不会以任何直接的方式被 Autocomplete 组件公开，但可以通过检查 HTML 以在呈现后计算选项来确定显示选项的数量。下面的示例通过覆盖Paper component 来实现这一点。选项显示在Paper 元素中，所有选项都收到data-option-index attribute。下面的示例使用这些方面来计算使用来自Paper 元素的querySelectorAll 的选项：

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Paper from "@material-ui/core/Paper";

const NumResultsHeader = ({ children, ...other }) => {
  const headerRef = React.useRef();
  const countRef = React.useRef();
  const paperRef = React.useRef();
  React.useEffect(() => {
    const numOptions = paperRef.current.querySelectorAll(
      "li[data-option-index]"
    ).length;
    countRef.current.innerHTML = numOptions;
    if (numOptions > 0) {
      headerRef.current.style.display = "block";
    } else {
      headerRef.current.style.display = "none";
    }
  });
  return (
    <>
      <div ref={headerRef} style={{ display: "none" }}>
        Showing <span ref={countRef}></span> of {top100Films.length}
      </div>
      <Paper {...other} ref={paperRef}>
        {children}
      </Paper>
    </>
  );
};
export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      PaperComponent={NumResultsHeader}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}