Try using the input event fired on the input element. The input event’s data property only shows the latest addition to the input’s value by clicking an option, typing or pasting, while the value property shows everything entered. Check it out in the snippet.

The event listeners on the option elements never get called – probably best to leave them out.

"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>

In answer to my question, here is a solution I adapted from an article by Keith (2020) which worked for me:

JavaScript

  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);
  });

Reference:
Keith, J. (2020) Submitting a form with datalist. Available from: https://adactio.com/journal/17337 [Accessed October 31, 2022]

I am developing a search engine for a website; now it’s working fine and responding to input search keywords with no issues in its interaction with the (Django-based) local web server. The problem (well there are actually two, but I’m presenting only one here) is with the datalist. When I select an option from the list, although it goes into the search input field, nothing happens until I click the submit button.

I have written an event listener for each option, but I’m clearly missing something (important). Here’s my minimal working code:

      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;
        })
      })

<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>

Maybe the event should be something else; I’ve tried “keydown” and clicking twice but nothing has worked.