Javascript - 自动完成搜索

Question

我有一个连接到 MySQL 数据库的自动完成搜索字段来检索值，它是为 Java 游戏编码的（它有项目 id、名称和图片）

已添加 20,000 个项目。它应该是一种查找，实际上，当您单击一个选项时，它会打印有关该物品的更多信息，例如游戏内价格和描述等。

问题在于它会延迟并且需要时间，因为要加载 20,000 张图片，我有点希望它显示图片以便玩家可以更轻松地找到东西。我确实知道，只需从显示中删除图片就不会滞后。

我想出的一个新想法是在开始搜索之前将最小字符设置为 3，这是最小的项目字母。这将有助于减少滞后，就好像项目的名称是“派对帽”，玩家需要写“par”或其他任何东西，所以它只会加载 100-500 个值，而不是只输入“a”并加载至少 70-80% 的值包含“a”，或“swo”代表“sword”。

其他人建议压缩图片，但20,000张图片实际上是18mb，每张图片大约1kb？

搜索字段仅加载结果图片，因此如果您将网站保持打开 1 小时，则不会加载任何图片，因为服务器尚未调用或请求加载特定图片。如果您输入内容，它会加载与您的搜索匹配的所有图像，即结果。 （100-1000 或其他）

有什么解决这个问题的建议或想法吗？

可以在这里找到它的外观示例..

Example 1

Example 2

感谢阅读！

Answer 1

对此进行优化的方法是优先考虑下拉列表中最先出现的图像，这是用户通常会看到的。您可以为从一开始就预加载的所有情况渲染微调器。

当用户开始输入并且您从数据库接收记录时，您将微调器设置为所有项目的图像，然后加载前 6 个项目的图像（例如），当所有项目完成时（或错误），加载下一个，等等。如果用户滚动，您必须计算正在显示的项目（有为此的库），但如果所有项目的大小相同，您可以通过滚动百分比来完成，然后优先考虑这些。

大多数时候用户不会立即滚动，因此用户体验会得到很大改善。这是检查图像是否已加载的方便构造：

const preloadImage = (imageSrc) => {
  return new Promise((resolve) => {
    if (!imageSrc) {
      resolve();
      return;
    }

    const img = new Image();

    img.src = imageSrc;
    img.onload = resolve;
    img.onerror = resolve;
  });
};

const preloadImages = (imagesSrc) => {
  return Promise.all(imagesSrc.map(preloadImage));
};

将最小值设置为 3 个字符是个好主意，但您也应该 debounce 请求，例如，在请求服务器检查输入值是否更改之前等待 500 毫秒，以防用户还在打字。