Dealing with a Vue.js typeahead component that was created by a previous developer at my company has been smooth sailing, except when it comes to Internet Explorer 11. In IE 11, there is a strange issue where characters typed into an input field with a keyup function sometimes don't register properly. I suspect this may be due to a performance bottleneck in the codebase. The snippet below contains the problematic code. Removing it eliminates the issue, but that's not a feasible solution. Do you have any recommendations on how I can optimize the performance of this code?
searchResults: function(e) {
this.isShown = true;
this.selectedIndex = 0;
this.filterOptions();
if (this.wildcardSearch) {
var searchObj = {}
searchObj[this.displayProp] = 'Search For: <strong>' + this.search + '</strong>'
this.matches.unshift(searchObj)
}
// Show first 5 results
this.matches = this.matches.splice(0, 5);
},
filterOptions: function() {
var lowSearch = this.search.toLowerCase();
var that = this;
if (this.search) { // don't filter on empty string
this.matches = this.options.map(function(o) {
if (o[that.displayProp].toLowerCase().indexOf(lowSearch) > -1)
return o
}).filter(function(o) {
return o
});
}
},