change.delegate is very slow

Question

I have an object which has two arrays of objects, like this:

Interests = {
   MostInterests: [],
   DistinctInterests: []
};

I also have an input that when is changed, uses a function to search elements in the Interests.DistinctInterests, but It looks like the change.delegate="function()" is taking a long time to trigger.

<input ref="textsearch" change.delegate="searchInterest($event.target.value)" type="text" />

searchInterest(value){
         console.log('SEARCH');
         this.searchedInterests = [];
         var i = 0, j = 0;;
         var upperValue = value.toUpperCase();
         for(i = 0 ; i < this.Interests.DistinctInterests.length ; i++){
             if(this.Interests.DistinctInterests[i].normalizedName.indexOf(upperValue) !=-1){
                 this.searchedInterests[j] = this.Interests.DistinctInterests[i];
                 j++;
             }
         }
         console.log('END SEARCH');
     }

The goal is update the view with the elements in this.searchedInterests, which contains items that match the searched text.

I don't know if It is an Aurelia problem or a JavaScript performance. I have also tried with $.each() function.

PS: the list contains 50 elements.

Answer 1

The change event is only fired when a change to the element's value is committed by the user.

Think of commited as CTRL+Z steps

---

This is the reason your function took more time to execute: it just wasn't called.

Instead, by using the input event, your function will get called every time the value changes.

<input ref="textsearch" input.delegate="searchInterest($event.target.value)" type="text" />