如何在点击datalist选项后触发JavaScript事件？

我指的不是输入任意内容，甚至不是手动输入与datalist选项完全一致的内容。我只想在点击显示的datalist选项时触发该事件。

我尝试了$('#search-data').click()和$('#search-data options').click()，但都没有触发。

我的代码示例：

<datalist id="search-options">
  <option>Test1</option>
  <option>Test2</option>
</datalist>

<input id="search-bar" type="text" list="search-options" class="form-control" placeholder="Search" aria-label="Search">

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

$('#search-options').click(function(){
  alert("test");
});

$('#search-options options').click(function(){
  alert("test 2");
});

解决方案 #

浏览器不会给datalist本身或其option元素绑定点击事件，直接监听它们的click事件无效。要实现点击datalist选项触发事件，得通过监听输入框的事件并做值校验来实现：

// 预存datalist所有选项的值，用于后续判断
const optionValues = Array.from(document.querySelectorAll('#search-options option')).map(opt => opt.value);

// 监听输入框内容变化事件
$('#search-bar').on('input', function() {
  const inputVal = $(this).val();
  // 仅当输入值存在于datalist选项中时触发逻辑
  if (inputVal && optionValues.includes(inputVal)) {
    alert(`选中了选项：${inputVal}`);
    // 标记当前是通过点击选项触发的，避免手动输入相同值误触发
    $(this).data('fromDatalist', true);
  } else {
    $(this).data('fromDatalist', false);
  }
});

// 补充监听change事件，处理部分浏览器中点击选项后直接失焦的场景
$('#search-bar').on('change', function() {
  const inputVal = $(this).val();
  if ($(this).data('fromDatalist') || (inputVal && optionValues.includes(inputVal))) {
    alert(`选中了选项：${inputVal}`);
  }
});

逻辑说明 #

1. 先把datalist的所有选项值存入数组，方便快速校验输入内容
2. input事件会在输入框内容变化时触发，包括点击datalist选项的场景
3. 用data属性标记是否来自datalist点击，避免手动输入相同值时误触发
4. change事件作为补充，覆盖部分浏览器中点击选项后输入框直接失焦的特殊情况

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