• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Clinical Encounters

  • Home
  • About
  • Blog
  • Contact
Home › Development › A Custom Autocomplete Dropdown

A Custom Autocomplete Dropdown

Jul 27, 2018 | Ian McKinnon

Clinical Encounters relies heavily on the input of data to create an overall engaging and interactive experience. To help users with the initial set-up of this data, we looked at various ways to create an easy and intuitive input experience.


Why We Wanted Autocompletion

Example of some available tags

The primary reason behind developing custom autocomplete functionality was to help handle tagging cases. Every case can be given a short subset of tags which can be used to search for and identify cases. These tags cover various medical topics or features about the case, such as cancer, neurology, pediatrics, or things like first visit and follow-up visits. We needed an easy to use way to display all available tags without overwhelming the user.

We had ideas for checklists or a regular drop-down, but both of those did not offer a great way for a user to conveniently find what they were looking for. So, we went forward with a system that would suggest tags based on what a user typed in. It would help with narrowing down the list of possible tags and could be used to quickly enter tags. An autocomplete system also helps us add and remove tags/suggestions without much effort since all that needs to be changed is the list of available tags.

Unfortunately, there were no available assets for an autocomplete system that satisfied our needs, so it fell on us to design our own!

How It Was Implemented

For our needs, we wanted users to be able to type out and choose multiple tags while using the same input field. To make something like this, there were a few key components that come into play. They are:

  • The list of all tags
  • The list of currently entered tags
  • The current tag the user is entering
  • A list of currently shown tags

These four items construct the base of the autocomplete feature. To simplify it, we compare what the user is currently entering to the list of all tags. We find any tag that matches and if the matching tag wasn’t already entered then we add it to the list of tags to show. From there, add other features such as a way to choose the top suggestion and support for deleting tags (both from selecting multiple or by simply backspacing) and the autocomplete drop-down is basically done.

Yet, it wasn’t that simple.

Problems and Progress

Part of the issue with creating this system was displaying the results. While Unity has a built-in drop-down feature, it’s not the greatest thing. For example, it’s impossible to navigate Unity’s drop-down results with the arrow keys – something we wanted our users to be able to do. This meant that we had to reconstruct a dropdown from scratch. Having Unity’s drop-down as a guide helped with this and with our own creation we had more control. Yet, with great power comes great responsibility as they say. Everything, from correctly setting up the drop-down in Canvas, managing player input, handling arrow navigation and selection, and dealing with Unity’s selectable objects and maintaining focus, fell on our shoulders. In the end, though, it was worth it.

Navigating using arrow keys

We also went through several iterations of improvement for the autocomplete. At first, it was as basic as it could be. It had bugs and wasn’t very friendly, but it worked (most of the time). We went through bug fixes and quality control until it behaved, but we still needed more from it. We then decided to add the arrow navigation. It was still using a test list of manually entered tags so we added the ability to load tags from a file making it easy for anybody to make changes and submit new tags. Finally, we added a button to force all available tags to show, making it truly akin to a dropdown.

Other Applications

How entering panels works

This autocomplete feature hasn’t been restricted to just inputting tags. We found a good use for it on our Medical Tests tab. On this tab, case creators can add different tests or lab panels (groups of tests) to order for the patient. We’ve added autocomplete drop-downs to select a test or panel that will populate many of the consistent data fields for the user. This way if a creator wants to offer the choice to order a Complete Blood Count panel, for example, they wouldn’t have to then manually add in the tests for WBC, RBC, HCT, Hgb, Platelets, and the normal ranges for each of those. Users can still enter in their own panels and tests, but the autocomplete helps us offer this handy feature.

You can read more about the Clinical Encounters platform at its website.

Category: Development Tagged: dev-blog game-based learning

Health Impact Studio logo

About Health Impact Studio

We are a dedicated team of developers and researchers with the mission to improve the health of individuals through novel technology including games, virtual reality, and role-playing simulations. We welcome input from the full range of stakeholders to create a customer experience with the broadest applicability to improving health outcomes.

Clinical Tools Wins $200K SBIR Award to Decrease Vaping Behavior in Adolescents and Young Adults

Sep 30, 2019

Mindfulness and Patient Communication

Nov 19, 2018

Diagnostic Uncertainty and Burnout

Oct 29, 2018

Previous Post: « How We Display Cases
Next Post: Catering To New Users (Without Ignoring Old Ones) »

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Ian McKinnon

Ian is a Unity Programmer working with C# primarily. Ian is a runner, dog lover, gamer, and is a pretty good juggler (The Circus is always his backup plan in life)

More Posts

Primary Sidebar

Keep Reading

  • Handling Images
    Jul 13, 2018
  • Creating Different Tiers of Interactive …
    Aug 31, 2018
  • Managing Case Files
    Jun 15, 2018
  • Contact Us
  • Copyright & Reproduction Guidelines
  • Privacy Policy
  • Terms of Service
  • Technology Requirements
  • 508 Compliance

Footer

developed & maintained by
ClinicalTools

The Clinical Encounters Training Group: SBIRT Training | BupPractice | PainTx Challenge | CE:Vaping | CE:Alcohol | CE:Obesity | OpioidCME

Clinical Encounters | Reader

Clinical Encounters | Platform

Group Training

  • Facebook
  • LinkedIn
  • Twitter
ceplatform@healthimpact.studio

101 A Market St Chapel Hill, NC 27516
919-960-8118

Contact Us

© 2021 · Clinical Tools, Inc · Log In

Log In

Forgot Password?
Don’t have an account?
Register now!
Register
  • This field is for validation purposes and should be left unchanged.

Welcome!

If you have an account, please log in! Or create an account now!