datalist eventlistenerからの予期せぬ返品

Question

データリストの選択肢からそれを#body divに出力し、それを他の関数を呼び出すために使用することを試みていますが、残念なことに何らかの理由で私は "undefined代わりに印刷され、データリストの提供されたオプションだけから選択を制御することはできません。

両方の問題を解決するためのアドバイスは非常に高く評価されます。

ありがとうございます！ :)

//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"）代わりdirList.option の値、しかもそれがdirList.optionsある - >データリストで利用可能なオプションを返します。