StoryDevs

Searching Within Menus

Sometimes the drop-down lists on StoryDevs are pretty long. The currencies list has around 150 options, for example. It’s a bit tedious to scroll through them all so I decided to make drop-down lists that have searchable options.

Each drop-down list now has an associated textfield that can be typed in to narrow down the options. You can also just ignore it and scroll through the options like normal:

Once you begin typing the list gets smaller, only showing you matches:

I decided to make options match regardless of where it finds your input within them. This (hopefully!) makes options easier to find, though it does give you more irrelevant results sometimes. You can find a currency by its three-letter code or the full name. So that’s nice.

Doesn’t This Already Exist…?

Chrome, Firefox, and Internet Explorer actually already have this functionality, more or less. Of course, long ago each browser signed a pact vowing never to implement a feature consistently between them. I was going to put up with this until I discovered Safari doesn’t even support it at all! Thanks Apple!

So what you’re seeing is my implementation (that actually more or less functions the same in every browser — imagine that!). Going fully custom means styling it however I please too! For example, I can now make the currency codes monospaced so they’re always aligned. Much easier to scan:

Notice that if you select a drop-down when it has an option already selected it shows you the entire list again, even though technically it only matches itself. If someone selects an option they already chose, chances are they want to change it. For this reason I also auto-highlight the text too.

It’s basic UX design, I suppose, but still important.

You can test these custom drop-downs live on the beta site. (If you want to reserve a handle or sub to the mailing list use the www site — the beta is just for testing.) There may be some graphical bugs. You also can’t add multiple drop-downs… yet! But I’ll keep working on it to fix those things.

StoryDevs is a place for developers of visual novels, interactive fiction, and story-oriented games to find each other and collaborate. The site is under development, but handle reservations are open: www.storydevs.com/reserve