Lessons learned from optimizing a uniquely challenging search UI
1st Jul 2019
Part One: 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 set.”
Not so bad, you’re thinking…
No backend help. Backend provides only the initial set of data and 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.
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. But thankfully, I didn’t bother trying to find alternatives.
Even though most of these complications are self-imposed, I decided to stubbornly plug away at trying to optimize this implementation. 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.
Next up, Understanding the Problem. Stay tuned!