如何使用jQuery autocomplete插件以JS文件中的嵌套数组为数据源？

嘿，我刚好折腾过类似的旧系统数据适配需求，给你一步步讲怎么把那个嵌套数组用上jQuery Autocomplete：

旧系统导出的Page数组是嵌套结构，而jQuery Autocomplete需要的是包含label（搜索时显示的文本）和可选自定义字段的数组结构。我们先把原始数据转成符合要求的格式：

// 遍历Page数组，提取显示文本和页面链接
var autocompleteData = Page.map(function(item) {
  return {
    label: item[0], // 这里用子数组的第一个字符串作为搜索显示项，你可以根据需求换成其他位置的字符串
    url: item[item.length - 1] // 固定取最后一个元素作为跳转的页面URL
  };
});

首先要确保页面已经引入了jQuery和jQuery UI的资源（Autocomplete是jQuery UI的组件），然后给搜索输入框绑定插件：

<!-- 先引入依赖资源 -->
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">

<!-- 你的搜索输入框 -->
<input type="text" id="docSearch" placeholder="搜索技术文档...">

<script>
// 先放上面的数据源转换代码
var autocompleteData = Page.map(function(item) {
  return {
    label: item[0],
    url: item[item.length - 1]
  };
});

// 初始化Autocomplete插件
$('#docSearch').autocomplete({
  source: autocompleteData, // 传入转换后的数据源
  minLength: 1, // 输入1个字符就触发搜索提示
  select: function(event, ui) {
    // 用户选中选项时，跳转到对应的文档页面
    window.location.href = ui.item.url;
    return false; // 阻止输入框自动填充选中的文本（如果需要填充可以删掉这行）
  }
});
</script>

如果你的数据有特殊需求，可以做这些调整：

• 去重处理：如果Page数组里有重复的文档项，可以用Set来过滤：

var uniqueLabels = new Set();
var autocompleteData = Page.reduce(function(acc, item) {
  var label = item[0];
  if (!uniqueLabels.has(label)) {
    uniqueLabels.add(label);
    acc.push({
      label: label,
      url: item[item.length - 1]
    });
  }
  return acc;
}, []);

• 多关键词匹配：如果想让搜索词能匹配子数组里的任意字符串（比如文档的标题、标签等），可以自定义source函数：

$('#docSearch').autocomplete({
  source: function(request, response) {
    var searchTerm = request.term.toLowerCase();
    // 过滤出子数组中任意字符串包含搜索词的项
    var matchedItems = Page.filter(function(item) {
      return item.some(function(str) {
        return str.toLowerCase().includes(searchTerm);
      });
    }).map(function(item) {
      return {
        label: item[0],
        url: item[item.length - 1]
      };
    });
    response(matchedItems);
  },
  minLength: 2, // 建议输入2个字符再触发，减少无效匹配
  select: function(event, ui) {
    window.location.href = ui.item.url;
    return false;
  }
});

内容的提问来源于stack exchange，提问作者user172586