来自事件监听器的数据列表意外 return

Question

我正在尝试从数据列表选择中获取 return 以将其打印到 #body div 并使用它来调用其他函数，但不幸的是原因是我打印了 return 的“未定义”，而且我也无法控制选择仅来自数据列表提供的选项。

任何解决这两个问题的建议都将不胜感激！

//Html snippet
<input id="dirSearch" list="dirList" type="text"/>
  <datalist id="dirList"></datalist>

// Array
const db = [
    1,
    2
];

//Functions
function autocomplete () {
  let options = '';
    for(let i = 0; i < db.length; i++)
      options += '<option value="'+db[i]+'">'+db[i]+'</option>';
  document.getElementById('dirList').innerHTML = options;
}
autocomplete();

function searchSelection () {
  let dirSearch = document.getElementById('dirSearch');
  let dirList = document.getElementById('dirList');

  dirSearch.addEventListener ('input', function () {
    document.getElementById('body').innerHTML = "<h1>" +dirList.option+ "</h1>";
  }, false);

}
searchSelection();

Answer 1

getElementById("dirSearch").value 而不是 dirList.option 而且它是 dirList.options -> 数据列表中的 returns 个可用选项。

来自事件监听器的数据列表意外 return

Datalist unexpected return from eventlistener

javascript

dom

addeventlistener

dom-events

html-datalist