限制自动完成组件的结果数量？

Question

我正在使用 React JS，我创建了一个自动完成组件，returns 一个结果列表。
这是我的自动完成代码：

const [pokedexMatch, setPokedexMatch] = useState([]);

const searchPokedex = (text) => {
  if (!text) {
    setPokedexMatch([]);
  } else {
    let matches = pokedex.filter((pokedex) => {
      const regex = new RegExp(`${text}`, "gi");
      return pokedex?.name?.match(regex);
    });
    setPokedexMatch(matches);
  }
};

这是一个有效的 sandbox，下面有一些虚拟文本。如您所见，当您键入一个字母时，它会 returns 很多结果并将文本移到结果下方。
我想做的是将结果数限制为 5 并使结果列表高于文本（我想我应该使用绝对定位但我想知道是否有另一种方法没有绝对定位）？

Answer 1

要将结果限制为 5，请使用简单的 Javascript!

setPokedexMatch(matches.slice(0, 5));

对于问题的定位部分，您的方向是正确的 - 您可以使用带有白色背景的 div 的绝对定位，使结果看起来在文本“上方”。

编辑：我更新了您的沙盒 here 并做了一些非常小的更改。

映射数组时，确保包含 key 属性。阅读更多 here.
我添加了 slice 方法来将您的结果限制为 5
我向父 <ul /> 元素添加了一个简单的 above class 以使结果显示在文本“上方”。这只是实现此目的的一种方法，如果您愿意，我会把它留给您来设计得更好。

限制自动完成组件的结果数量？

Limit the number of results for autocomplete component?

autocomplete

reactjs