I have an input with attached datalist:

<input type="text" list="mylist">

<datalist id="mylist">
<option>1
<option>2
</datalist>

When I choose an option from the list then the change event doesn't fire on the input element. So how can I detect input's change?

I have an input with attached datalist:

<input type="text" list="mylist">

<datalist id="mylist">
<option>1
<option>2
</datalist>

When I choose an option from the list then the change event doesn't fire on the input element. So how can I detect input's change?

• javascript
• jquery
• html

• you can use Jquery to detect the change. eg $(‘#input-or-select-element-id‘).change(function(){}); – Ji_in_coding Commented Feb 13, 2015 at 20:12
• it sounds like he's already using the $.change() function – CodeGodie Commented Feb 13, 2015 at 20:13
• No value set - therefore no change is happening? – below9k Commented Feb 13, 2015 at 20:13
• @below9k that sounds right.. he needs to show his code. – CodeGodie Commented Feb 13, 2015 at 20:14
• @CodeGodie just FYI, the way of talking about jquery functions that belong to the matching set is $.fn.change – George Mauer Commented Feb 13, 2015 at 20:16

5 Answers 5

You can capture the input event:

document.querySelector('input').addEventListener('input', function() {
  alert('Changed!');
});

<input type="text" list="mylist">

<datalist id="mylist">
<option>1
<option>2
</datalist>

Update

I didn't notice the jQuery tag at first, and @YanickRochon made a good point that this should also capture the change event.

New Snippet

$('input').on('input change', function() {
  alert('Changed!');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="mylist">

<datalist id="mylist">
<option>1
<option>2
</datalist>

$(document).ready(function(){

  $('input').on('input', function () {
      alert("changed");
   })

});

Fiddle

You can use input event, like this

$('#input-list').on('input change', function () {
  console.log($(this).val());
})

Example

All other answers are not differentiating between input scenarios

The question is about how to specifically know when an input was changed by a datalist and not by anything else. This is very important to differentiate.

The below code will absolutely differentiate between a user input either by typing, pasting via the keyboard or via mouse or any other way, and between actually selecting an option from a <datalist>

var noneDatalistInput;

$('input').on('keydown paste', onNoneDatalistInput)
          .on('input', onInput);

// raise a flag
function onNoneDatalistInput(e){
    if( e.key == "Enter" ) return;
    if( noneDatalistInput ) clearTimeout(noneDatalistInput);
    noneDatalistInput = setTimeout(function(){ noneDatalistInput = null }, 50);
}

function onInput(){
    var isDatalistInput = !noneDatalistInput;
    console.log('was a datalist option selected? ', isDatalistInput);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="mylist">

<datalist id="mylist">
  <option>1</option>
  <option>2</option>
</datalist>

are you listening to INPUT change? or DataList Change?

// wont work
$("#myList").on('change', function () {
    alert("yay!");
});

// fires yay! when change value (after focus out)
$("#myText").on('change', function () {
    alert("yay!");
});

check out this fiddle