Search Autocomplete Thing I Did

image for 'Search Autocomplete Thing I Did' post

My employer has a lot of acronyms for business terms that we use throughout the day. I created a proof-of-concept for an acronym search engine, with the goal of releasing it internally.

It had been a few months since I coded up something app-like, especially with JavaScript. So I created this using a few coding things I hadn’t really played with yet.

Turns out something like this already existed internally so I shelved the plan. But I learned a lot while doing it, so I’m documenting it all in a blog post.

No tutorial or code review…just documenting things so I don’t forget them. The code’s here on GitHub with instructions on how to run it locally.

The search results now being returned are now the acronyms for various athletic leagues. WNBA, EPL, NBA, etc.

Here’s what I learned:

  • I used vanilla, non-framework-or-library JavaScript to do this. I'm happy about it.
  • The vanilla JavaScript was written in Typescript and I'm REALLY happy about that. My code had less bugs, spotting the bugs was easier, writing tests was easier, etc.
  • For compiling the newer ECMAScript versions down to legacy versions, I prefer TypeScript to Babel. It seems to take less configuration and plug-in use.
  • Using fetch() and async/await are current best practices. But if you're trying to share JSON data globally in your app, they're a major pain. I almost reverted to the legacy XmlHttpRequest() object to get this done.
  • All this fetch() and async/await annoying stuff happens when using the Reacts and Vues of the world. But those tools do a great job of abstracting those annoyances out...I really respect that.

I don’t see any tutorials coming directly out of this…again, I’m just documenting things. Feel free to ask me questions if you have any.

Would you like to Tweet this page?