如何在<datalist>选中选项时获取data-id并触发JS事件？

一、继续使用<datalist>的可行方案 #

<datalist>本身没有原生选中事件，但可以通过监听绑定的<input>的input或change事件，结合输入值匹配对应的<option>元素来获取data-id。核心逻辑是：选中选项后，<input>的value会同步为对应<option>的value，以此为依据查找目标元素。

代码示例 #

HTML结构

<input type="text" id="autoCompleteInput" list="itemList">
<datalist id="itemList">
  <option value="商品A" data-id="1001"></option>
  <option value="商品B" data-id="1002"></option>
  <option value="商品C" data-id="1003"></option>
</datalist>

JavaScript逻辑

const input = document.getElementById('autoCompleteInput');
const datalist = document.getElementById('itemList');

// 同时监听input和change事件，覆盖手动输入选中和键盘选中场景
input.addEventListener('input', handleOptionSelect);
input.addEventListener('change', handleOptionSelect);

function handleOptionSelect() {
  const selectedValue = input.value.trim();
  if (!selectedValue) return;

  // 从datalist的选项中匹配对应value的元素
  const matchedOption = Array.from(datalist.options).find(opt => opt.value === selectedValue);
  
  if (matchedOption) {
    const itemId = matchedOption.dataset.id;
    // 这里执行你的业务逻辑，比如发送AJAX请求
    console.log('选中项ID：', itemId);
    
    // 可选：自定义事件，模拟<select>的change触发逻辑
    input.dispatchEvent(new CustomEvent('optionSelected', {
      detail: { id: itemId, name: selectedValue },
      bubbles: true
    }));
  }
}

二、替代原生元素方案 #

如果<datalist>的事件支持无法满足需求，推荐两种具备类似交互的替代方案：

1. <select> + 搜索过滤 #

通过给<select>搭配搜索输入框，实现自动补全效果，同时保留<select>原生的change事件，直接获取选项值（可将data-id设为<option>的value）。

代码示例

<input type="text" id="searchBox" placeholder="搜索商品">
<select id="itemSelect" style="width: 200px;">
  <option value="1001">商品A</option>
  <option value="1002">商品B</option>
  <option value="1003">商品C</option>
</select>

const searchInput = document.getElementById('searchBox');
const select = document.getElementById('itemSelect');

// 监听输入过滤选项
searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value.toLowerCase();
  Array.from(select.options).forEach(opt => {
    const optionText = opt.text.toLowerCase();
    opt.style.display = optionText.includes(searchTerm) ? 'block' : 'none';
  });
});

// 原生change事件直接获取选中ID
select.addEventListener('change', () => {
  const selectedId = select.value;
  const selectedName = select.options[select.selectedIndex].text;
  console.log('选中项ID：', selectedId);
  // 执行AJAX请求等逻辑
});

2. 自定义<input> + <ul>下拉菜单 #

完全自定义交互逻辑，实现和<datalist>一致的键盘导航（箭头切换、回车选中），同时支持更灵活的事件监听。

代码示例

<input type="text" id="customAutoComplete" placeholder="输入搜索">
<ul id="customDropdown" style="display: none; list-style: none; padding: 0; border: 1px solid #ccc;"></ul>

// 模拟数据源
const itemData = [
  { id: 1001, name: '商品A' },
  { id: 1002, name: '商品B' },
  { id: 1003, name: '商品C' }
];

const input = document.getElementById('customAutoComplete');
const dropdown = document.getElementById('customDropdown');
let currentActiveIndex = -1;

// 输入时渲染过滤后的选项
input.addEventListener('input', () => {
  const searchTerm = input.value.toLowerCase();
  const filteredItems = itemData.filter(item => item.name.toLowerCase().includes(searchTerm));
  
  dropdown.innerHTML = filteredItems.map((item, index) => 
    `<li data-id="${item.id}" class="${index === currentActiveIndex ? 'active' : ''}">${item.name}</li>`
  ).join('');
  dropdown.style.display = filteredItems.length ? 'block' : 'none';
});

// 点击选项选中
dropdown.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    input.value = e.target.textContent;
    const itemId = e.target.dataset.id;
    console.log('选中项ID：', itemId);
    dropdown.style.display = 'none';
    currentActiveIndex = -1;
    // 执行业务逻辑
  }
});

// 键盘交互：箭头切换、回车选中
input.addEventListener('keydown', (e) => {
  const options = dropdown.querySelectorAll('li');
  if (options.length === 0) return;

  switch(e.key) {
    case 'ArrowDown':
      e.preventDefault();
      currentActiveIndex = (currentActiveIndex + 1) % options.length;
      updateActiveOption(options);
      break;
    case 'ArrowUp':
      e.preventDefault();
      currentActiveIndex = currentActiveIndex <= 0 ? options.length - 1 : currentActiveIndex - 1;
      updateActiveOption(options);
      break;
    case 'Enter':
      e.preventDefault();
      if (currentActiveIndex >= 0) {
        options[currentActiveIndex].click();
      }
      break;
  }
});

// 更新高亮选项
function updateActiveOption(options) {
  options.forEach(opt => opt.classList.remove('active'));
  options[currentActiveIndex].classList.add('active');
}

// 点击外部关闭下拉
document.addEventListener('click', (e) => {
  if (!input.contains(e.target) && !dropdown.contains(e.target)) {
    dropdown.style.display = 'none';
    currentActiveIndex = -1;
  }
});

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