Selecting HTML datalist option does not trigger search event-CodePudding

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  value="Happy">
        <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.

CodePudding user response：

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  value="Happy">
    <option  value="Puzzled">
  </datalist>
  <button id="go" type="submit"><strong>&#x1F50E;&#xFE0E;</strong></button>
  <button id="reset" type="reset"><strong>X</strong></button>
</form>

CodePudding user response：

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]