How to detect text change when autocompleting with a datalist attribute

Question

I'm trying to have an input field react to text change events. The field has a datalist attribute to have autocompletion.

As I understand it, if I want to hook on the event as the user types (and not onBlur for example), I can use ng-keyup.

It works fine when a user types something, but not when he clicks a choice in the autocomplete box.

Is there another event I can listen to, to be able to fire an action when the user autocompletes his choice?

I also tried ng-keydown and ng-keypress without success.

Here's how I declared my input box:

<input id="id" list="someList" ng-model="myModel" ng-keyup="functionToCall()">

PS: I'm using Angular Dart.

edit:

So I retried the same thing, but I removed the ng-model attribute to make sure it wasn't causing friction while updating the model. So in my view :

<input id="bob" list="itemOptions" placeholder="Type an item name" ng-change="onItemNameChange2()" >

and in my component :

void onItemNameChange2() {
  print("changed");
}

And it only prints changed when onBlur().

I also tried removing the list attribute:

<input id="bob" placeholder="Type an item name" ng-change="onItemNameChange2()">

and also only prints when onBlur (so just typing doesn't make the print() method to be called, I really have to leave the input field)

Answer 1

You can use ng-change. I made an example fiddle in JavaScript. It should work the same in Dart.

The list and the ng-change are attached to the input.

<input type="text" ng-model="myData" list="myList" ng-change="textChange()" />
<datalist id="myList">
    <option ng-repeat="item in items" value="{{item}}" />
</datalist>

ng-change isn't actually an html event it's an angular event triggered when the view data updates.