Autocomplete

All posts, RSS Feed

Two weeks ago, I wrote a post on better input fields. Today we have completed the Autocomplete update, and we already have ideas for additional improvements in the future!

The larger part of implementing the autocomplete was making sure that it can handle all kinds of different data we are putting in it. We wanted it to handle tag fields, plain text fields, link fields, and even more exotic data such as equipment on a character sheet.

To be able to handle all these different tasks we split the autocomplete into parts: a shared core and several “jigsaw holes” of functionality that we fill on a case-by-case basis for different types of data.

The shared core handles the interface a player interacts with: it makes sure that the dropdown is shown in the right place, and handles selecting a suggestion with the up and down keys, as well as clicking an option or pressing enter with a selection.

Whatever we put in the “jigsaw holes” is used by the core to process the data we want to make available in the autocomplete. An example of such a “hole” would be how the data is displayed to the player when options are available: in the screenshot we are autocompleting an Affiliations field to set an affiliation to the Power Plant Club. As you can see in the screenie, the autocomplete not only shows the names of the pages, but also displays the image of the page — this is possible because we created a specialised display for links, which plugs into the appropriate jigsaw hole.

These jigsaw holes are available for all kinds of functionality: changing how and option is displayed, making things happen when you pick one of the options, sorting the options so the best ones are shown to you, determine what options to show at all, and so forth.

By combining different “jigaw pieces” we can build a fitting autocompletion for most situations. Another example is the autocomplete for the tags field, as shown in the screenshot. It keeps the simple “just a text” display from the shared core, but receives its list of options from the the tag index on the server.

In the same way, we can now add autocomplete to fields where the possible options depend on the contents of another field. In the next screenshot to the right you can see how this results in an improvement when updating your Pathfinder character’s skills, based on the configured specializations.

We are happy to say that this week we finished adding autocomplete functionality to most of the places where it makes sense! As always, you can view this week’s changelog for a detailed listing of changes, including the exact places where autocomplete is now available.

If you find a field that has no autocomplete, and you think it should have, be sure to let us know by starting a thread!