Выбор опции HTML datalist не вызывает событие поиска

Я разрабатываю поисковую систему для веб-сайта; сейчас она отлично работает и реагирует на вводимые ключевые слова поиска без каких-либо проблем при взаимодействии с локальным веб-сервером (основанным на Django). Проблема (на самом деле их две, но я представляю здесь только одну) заключается в списке данных. Когда я выбираю вариант из списка, хотя он попадает в поле ввода поиска, ничего не происходит, пока я не нажимаю кнопку submit.

Я написал слушателя событий для каждого варианта, но я явно что-то упускаю (важное). Вот мой минимальный рабочий код:

HTML

    <form id="search-form" action ="{% url 'search' %}" method='POST'>
      {% csrf_token %}
      <input id="enter" type="search" list="options" name="query" />
      <datalist id="options">
        <option class="option" value="Happy">
        <option class="option" value="Puzzled">
      </datalist>
      <button id="go" type="submit"><strong>&#x1F50E;&#xFE0E;</strong></button>
      <button id="reset" type="reset"><strong>X</strong></button>
    </form>

JavaScript

    <script>
      const searchForm = document.getElementById('search-form');
      const enter = document.getElementById('enter');
      let options = document.querySelectorAll(".option");
      options.forEach((item, index) => {
        item.addEventListener("click", () => {
          return searchForm.action;
        })
      })
    </script>

Возможно, событие должно быть каким-то другим; я пробовал "keydown" и щелчок дважды, но ничего не помогло.

"use strict";
const enter = document.getElementById('enter');
let options = document.querySelectorAll(".option");
options.forEach((item, index) => {
  item.addEventListener("click", () => {
    console.log("clicked option ", this.value);
    return searchForm.action;
  })
  // debug:
  enter.oninput = e=>console.log('event.data: %s, enter.value: %s',e.data,enter.value);
})

<form id="search-form" action ="" method='' onsubmit="console.log(event);return false">
  <input id="enter" type="search" list="options" name="query" />
  <datalist id="options">
    <option class="option" value="Happy">
    <option class="option" value="Puzzled">
  </datalist>
  <button id="go" type="submit"><strong>&#x1F50E;&#xFE0E;</strong></button>
  <button id="reset" type="reset"><strong>X</strong></button>
</form>

  const enter = document.getElementById('enter');
  document.querySelectorAll('#enter[list]').forEach( function (formfield) {
    var options = document.getElementById('options');
    var lastlength = formfield.value.length;
    var checkInputValue = function (inputValue) {
      if (inputValue.length - lastlength > 1) {
        options.querySelectorAll('option').forEach( function(item) {
          if (item.value === inputValue) {
            formfield.form.submit();
          }
        });
      }
      lastlength = inputValue.length;
    };
    formfield.addEventListener('input', function () {
      checkInputValue(this.value);
    }, false);
  });