CODEWITHSUNDEEP
aurelia
Felipe Santana
Felipe Santana

Reputation: 733

change.delegate is very slow

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.

Upvotes: 3

Views: 1686

Answers (1)

user2345
user2345

Reputation: 3227

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" />

Upvotes: 4

Related Questions