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);
},