4

I have a datalist that looks like :

<datalist id="foodlist">
 
  <option value="one" ></option
  <option value="two" ></option>
  <option value="three" ></option>
 
</datalist>

<input type="text" list="foodlist" autocomplete=true id="inputItem"/>

I want an event to fire when user selects on of the option in the list using JavaScript.

How to achieve it?

onClick, onChange does not seem to work.

RosAng
  • 970
  • 2
  • 17
  • 41

3 Answers3

11

I know this is kind of old, but I thought I should document it somewhere. If you're trying to detect input from a dropdown selection rather than a click per se, you can use the "input" event and check the type of the passed event object - cut/paste/keypress input will pass an "InputEvent" object, whereas a datalist selection will pass a generic "Event" object.

var textbox = document.getElementById("inputItem");
textbox.addEventListener("input", function(e){
    
    var isInputEvent = (Object.prototype.toString.call(e).indexOf("InputEvent") > -1);
    
    if(!isInputEvent)
        alert("Selected: " + e.target.value);
    }, false);
<datalist id="foodlist">
 
  <option value="one" ></option>
  <option value="two" ></option>
  <option value="three" ></option>
 
</datalist>

<input type="text" list="foodlist" autocomplete=true id="inputItem"/>
Couchy X
  • 111
  • 1
  • 5
0
<datalist id="foodlist">    
    <option value="one" ></option>
    <option value="two" ></option>
    <option value="three"></option> 
</datalist>

<input id="txt" type="text" list="foodlist" autocomplete=true id="inputItem"/>

document.getElementById('txt').addEventListener('input', function () {
    console.log('changed'); 
    var val = document.getElementById("txt").value;
    alert(val);
});

The datalist tag is only supported in some browsers. Here's simple trick to get selected value.

takendarkk
  • 3,178
  • 7
  • 23
  • 36
  • select and datalist are two different tags – RosAng Aug 09 '15 at 09:29
  • Hi this generates the event for every letter i click on the input box. My expectation is to generate the event only when i click on the suggested list – RosAng Aug 09 '15 at 15:45
0

While this is 4 years old, I stumbled across it today, and ran into the cross browser issues that others have reported. I was able to solve this by listening to the keyup event on the input field, and then checking the event type.

<input type="text" name="field_name" id="field_id" list="fields_list">
<datalist id="fields_list"></datalist>

<script>
var fieldInput = document.getElementById("field_id");

fieldInput.addEventListener('keyup', function(e) { if (isKeyboardEvent(e)) { myFunction(); } });

function isKeyboardEvent(e) {
    return (e instanceof KeyboardEvent);
}

function myFunction() {
   /* function that does something only on keyboard input */
}
</script>

Actual key strokes will be KeyboardEvent while a datalist option click will be simply be an Event.

Confirmed working in Chrome, Firefox, and Edge.

Andy Stagg
  • 303
  • 4
  • 19
  • This doesn't work in Firefox 75.0. The only way I found to catch the datalist option selection/click is to test the value against the options list. – RCKT Apr 19 '20 at 19:07