Okay, so I've written a searching application, it works great, back end is 100% fine. HOWEVER now that the back end is done, I'm working on the front end. I'm just trying to include some highlighting features, and it works, however, right now, due to a lack of sleep, my ability to think with boolean logic isn't great. I've been having a lot of brain farts today.
All I'm working on is this piece of code:
/* UPDATE INCLUDES TESTING VARIABLES */
$(document).ready(function(){
var start = new Date().getTime();
console.log("Started at: " + start);
var search = $('#keyword').text();
var listItems = $('#search-results');
listItems.find('.index').each(function(){
let current = $(this).text();
for(let i = 0; i < s.length; i++){
for(let j = 0; j < current.length; j++){
let currChar = current.charAt(j);
let sChar = s.charAt(i);
if(currChar == sChar){
$('.search-index').highlight(current.charAt(j));
break;
}
}
}
});
var end = new Date().getTime();
console.log("Ended at : " + end);
var dur = (end - start) / 1000;
console.log("Time taken to execute: " + dur + ".sec");
});
Now like I said, it works no problem, however I think it would be best to only highlight characters IF both j & i match twice in a row rather than just the once. I only say that because let's say you've searched for something like Forest Gump and there's a tonne of results. Let's just say the server returns Forever Young (random - don't ask, just accept it). It will currently highlight every character in the returned result if character 'z' is within the searched term.
That's not really an issue, I mean I kinda wanted that to be honest. But I would also like to calm it down a little. As for the highlighting method, I'm just being lazy and using a tool someone else made.
To be exact:- http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
From what you've read, can you suggest any better ways in which I could include such a feature? - I've also notices if I allow a silly number of results to return, it'll take a noticeable amount of time for the function to do it's thing, I know nested loops with a lot of iterations aren't exactly computationally friendly, but right now it's all I can come up with. I am pretty much brain dead right now.
Just to test how effective my front end implementation is, I decided to place a ridiculous amount of data into the algorithm. Long story short, it's actually embarrassing how awful it is in terms of efficiency..... I mean I did decide to pass in 1,000 different pieces of data into it, but still. I console logged the time my script started, and ended, and on my test of 1,000 different inputs, it ended up taking... [DRUM ROLL].... 203.652 SECONDS... That's not good by anyone's standard...
Maybe someone can see a way where I don't have to use nested loops or quite as many loops? - The only way I can see around this is that I'd have to use nested loops, but then again, I'm a junior web developer, what do I know aye?
But at the same time, I do need to loop through each class called index. I then need to collect or loop through each character in the specific class of index. I then need to loop/compare each letter in the searched term. I mean I can't really think of a way around this without seriously sacrificing on the code's readability.
Not that I thought it would've made much difference, but I thought I'd try breaking it up into functions, and if anything, I think that made it slower to be honest. With it all being within one function, it takes 0.763 seconds with a realistic amount of data passed into the function, when I tried breaking it up, it went to over double that.