在 Material UI 自動完成中的文本字段輸入中顯示匹配搜索選項的數量

Question

我正在嘗試自定義 Material UI Autocomplete 並顯示當前在用戶搜索並在搜索框中輸入字符串后 Popper 菜單中顯示的選項計數（這是在您之前 select 一個選項，它變成一個value是使用value.length很容易得到計數）。 當用戶在 < <Autocomplete/> /> 的renderInput prop 的<Textfield/>中輸入擊鍵時，我可能會丟失 prop 以獲取整個選項數組中顯示的選項數量。

這是代碼：

 <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 示例文檔中提取的類似內容的代碼筆，用於更好地說明起始代碼集

Answer 1

使用useAutocomplete掛鈎很簡單，因為它公開了groupedOptions變量（即過濾選項）。

這是一個例子：

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>
  );
}

---

Autocomplete組件不會以任何直接的方式公開groupedOptions ，但可以通過檢查 HTML 來確定顯示的選項數，以便在呈現后計算選項數。 下面的示例通過覆蓋Paper 組件來實現這一點。 這些選項顯示在Paper元素中，並且所有選項都接收一個data-option-index 屬性。 下面的示例使用這些方面來計算使用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" />
      )}
    />
  );
}