0

Please let me know the best way (good performance/turnaround time) to implement my issue.

We have a lightning component on communities which has a list of approx 3000 values. We implemented a search feature to filter the list to make it easier for the end user.

We started facing performance issues as the search was being called for every key press. We tried getting around it by invoking search only when 4 characters are entered but entering 5 or 6 characters repeats the problem.

Any help in this much appreciated.

Code :// Filter the options down to those that contain the text entered so far filterOptions: function(component) { var options = component.get("v.options"); console.log('Options value is'+options); var filter = component.get("v.selectedItemText").toLowerCase(); var filterLength = filter.length; console.log('filter value is'+filter); console.log('filterlength is'+filterLength); var filteredOptions=[]; var nextOption =''; // Trigger search only on entering 4 characters if(filterLength > 3) { for (var i = 0; i < options.length; i++) { nextOption = (options[i].constructor === Array) ? options[i][1] : options[i]; console.log('nextOption value is'+nextOption); var nextOptionLower = nextOption.toLowerCase(); if (filter == "" || nextOptionLower.includes(filter)) { filteredOptions.push(nextOption); } } } component.set("v.filteredOptions", filteredOptions); },

1 Answer 1

1

Issue i like that whenever you are typing in the text box you code start processing that why the performance is slow.

for this you have to follow one approch like: whenever user stop typing than after some milisecond your actual filter code should run.

filterOptions: function(component){

    // Clear the timeout if it has already been set.
    // This will prevent the previous task from executing
    // if it has been less than <MILLISECONDS>
    clearTimeout(component['timeout']);

    // Make a new timeout set to go off in 800ms
    component['timeout'] = setTimeout(function () {

        //**Put you filter code in this**.

    }, 500);
}

So this code will ensure that when user stop typing than after 500 (you can increase or decrease this) your filter code will execute.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .