如何使用JavaScript将数字数组添加到input输入框自动填充列表

现有代码修正 #

你提供的初始代码存在两处语法错误，需先修复：

• HTML端input标签的id属性缺少赋值等号，同时我们新增datalist标签用来承载自动填充选项
• JavaScript端数组声明语法错误，数组需用方括号[]包裹，var关键字需小写

修正后HTML代码 #

<input type="text" id="users" list="numList">
<!-- 自动填充选项容器 -->
<datalist id="numList"></datalist>

修正后基础JS代码 #

// 修正后的数字数组声明
const numArr = [1, 2, 3, 4];

自动填充功能实现 #

以下完整代码可直接实现数组内容作为输入框自动填充选项的效果：

// 获取DOM元素
const inputDom = document.getElementById('users');
const datalistDom = document.getElementById('numList');
const numArr = [1, 2, 3, 4];

// 遍历数组生成填充选项
numArr.forEach(item => {
  const option = document.createElement('option');
  option.value = item;
  datalistDom.appendChild(option);
});

功能说明 #

• 点击输入框即可自动下拉展示数组内所有数字选项
• 输入内容时会自动匹配过滤符合输入前缀的选项供选择
• 如果需要自定义匹配规则、下拉样式，可监听input的输入事件自己写下拉渲染逻辑，不需要用原生datalist

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