如何用原生JS加载JSON数据实现HTML输入框datalist自动补全？

你的思路方向是对的，但有两个关键错误需要修正：JSON.parse()只能解析JSON字符串，不能直接读取文件；input的list属性需要指向<datalist>元素的ID，而非直接引用变量。以下是符合需求的简洁实现：

修改后的完整代码 #

<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>

<div>
Enter Name:
</div>

<div>
<!-- 给input指定list属性，关联对应的datalist -->
<input type="text" list="nameList" />
<!-- 定义用于自动补全的datalist -->
<datalist id="nameList"></datalist>
</div>

<script>
// 加载JSON文件并生成自动补全选项
fetch('names.json')
  .then(res => res.json())
  .then(names => {
    const datalist = document.getElementById('nameList');
    // 用文档片段批量创建元素，减少DOM操作次数（优化大量数据的加载性能）
    const frag = document.createDocumentFragment();
    names.forEach(name => {
      const opt = document.createElement('option');
      opt.value = name;
      frag.appendChild(opt);
    });
    datalist.appendChild(frag);
    // 将列表挂载到全局，满足你需要全局变量的需求
    globalThis.namelist = names;
    console.log(globalThis.namelist.length);
  })
  .catch(err => console.error('加载名称列表失败:', err));
</script>

</body>
</HTML>

关键说明 #

1. 文件加载：使用fetch()异步加载names.json，这是浏览器读取本地/远程JSON文件的标准方式，替代你错误的JSON.parse("names.json")写法。
2. 原生自动补全：依赖HTML原生的<datalist>元素实现自动补全，无需引入第三方库，代码轻量化。
3. 性能优化：针对数十万个选项的场景，使用DocumentFragment批量添加<option>，避免频繁操作DOM导致页面卡顿。
4. 全局变量：将名称列表挂载到globalThis上，和你期望的globalThis.namelist用法一致。

大文件额外优化建议 #

如果names.json体积达到数MiB，一次性加载所有数据可能影响页面初始化速度，可考虑：

• 在后端实现模糊查询接口，前端输入时动态请求匹配的结果，而非一次性加载全量数据。
• 对名称列表提前排序，让补全结果更符合用户预期。

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