title: Datalist unexpected return from eventlistener
body: <p>I'm trying to get a return from the datalist selection to print it to the <code>#body</code> div and use it to call other function as well, but unfortunately for some reason I get a return of &quot;undefined&quot; printed instead and I can't control the selection to be just from the provided options of the datalist as well.</p>
  <p>Any advice to fix both problems would so much appreciated!</p>
  <pre><code>//Html snippet
  &lt;input id=&quot;dirSearch&quot; list=&quot;dirList&quot; type=&quot;text&quot;/&gt;
    &lt;datalist id=&quot;dirList&quot;&gt;&lt;/datalist&gt;
  
  // Array
  const db = [
      1,
      2
  ];
  
  //Functions
  function autocomplete () {
    let options = '';
      for(let i = 0; i &lt; db.length; i++)
        options += '&lt;option value=&quot;'+db[i]+'&quot;&gt;'+db[i]+'&lt;/option&gt;';
    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 = &quot;&lt;h1&gt;&quot; +dirList.option+ &quot;&lt;/h1&gt;&quot;;
    }, false);
  
  }
  searchSelection();
  </code></pre>