The Challenge

The task seemed simple enough:

“Here is a data set retrieved from a backend. It contains 13,000 items with very long, wordy names (Scientific Organizations). Make a search bar with an auto-suggest using this data.”

Not so bad you’re thinking…

Complication 1:

No backend help. Backend provides only the initial set of data. All search logic has to be done on front end.

Complication 2 (self-imposed):

Developer (me): “These organization names are really long and technical. If we are just doing simple string matching and a user mistypes or misspells the search, it will be really hard to find anything.” Client: “Good point, make it intelligent so it can predict what the user intends to type despite typos.”

Disclaimer: In general, suggesting unsolicited difficult features without the consent of your Project Manager is not recommended! This is known as feature creep. In this case, I happened to be on a relatively easy solo contract with plenty of headroom, so I thought it would be an interesting challenge.

Complication 3 (also self-imposed):

Now this is the big one. The intelligent (otherwise known as “fuzzy”) search engine I chose was SLOW…

The search algorithm library had painfully long search times as the length of the search term got longer. And, seeing as how this was such a huge list with very wordy items, users would need to type a long search term to get to their desired suggestion. There was no getting around it, the search wasn’t going to be able to keep up with the user typing and the UI would end up hanging badly.

Oh my…

I don’t know if the library I chose for the search algorithm was bad or if this was an inevitability of any “fuzzy” search algorithm. Thankfully, I decided to stubbornly plug away at trying to optimize this implementation instead of trying to find a new library right away. While I understand that this is likely not the best strategy for a lot of jobs, in this case the situation allowed it, the results will speak for themselves and most importantly it turned out to be a fantastic learning experience and an opportunity to grow as a developer.

The Journey

The coolest thing about trying to solve this challenge was that it seemed to lend itself so well to a great learning experience. The way the solution unfolded led to many different iterations, each making an incremental improvement and carrying an essential lesson about JavaScript, React and good UI. This does mean that there is a lot of content worth sharing.

Where I can I will link to multiple iterations sorted by difficulty/complexity so you can choose content that seems most interesting to your level. Whatever your level and whatever path you choose, if you’re a fan of pushing front end JavaScript to its limits, I think you will find these implementations dive into advanced topics and interesting perspectives worth exploring.

Lets go!

⇒ v1.0.0 Understanding the Problem