The Study Search box was refactored today. This is one of the oldest piece of code and UX on the website that hasn't changed in years. It was 839 lines of outdated Javascript and it was quite bad: it took nearly half a second for the results to show up when you type in the Search box.

The new version is just 203 lines of TypeScript, and it's much more responsive, the dropdown updates almost instantaneously as you type in the search box.

I increased the size of the dropdown, and further increased the text size on smartphone so it is easier to read.

Functionality wise there is a small improvement over the old one : if you type in an index number, it shows the matching kanji and keyword in the dropdown. Sometimes you want to look up a character by index, this gives instant confirmation without having to move to another page.

Searching for custom keywords

Note that the behaviour is similar to the old one. One caveat is the autocompletion can get in the way of searching for a custom keyword: the dropdown contains only original keywords, and pressing tab or enter will autocomplete with an original keyword if there are any matches (which is most of the time). The trick here is to add a space after your search term. This will close the dropdown, then you can press enter to search for just what you typed. You can also press Escape to close the dropdown, then press enter.