Our web app has a "jurisdiction chooser" which is a 2-level nested list of all US states and many large US cities. Both cities and states are selectable. I'd like to add autocomplete to this list chooser. An interesting challenge is what to do when the autocomplete input matches a city but not its containing state.

My latest attempt is below, but it doesn't feel quite right. Any suggestions for how to handle this case better?

1 Answer 1


I don't think it's a bad solution, maybe a bit confusing.

The problem is to differentiate a syllable or word between two possible states. To do this you use three typographical variations:

  • Color (blue): to better visualize the syllables
  • Weight (bold): same objective

And an addition not raised: differentiate the state that doesn't contain that syllable in its city.

  • Style: italics

Three typographical variations for two results.

I propose to remove one and enhance the others to obtain a better perception. The Q example shows a simple result, but in case more cities result in a state, maintaining the same line spacing between states and cities will generate a bigger visual confusion. At least, the user is only interested in seeing the "river" formed by the results (Gestalt Principle of Similarity) to quickly find the needed item. Showing that a city belongs to a state is as simple as reducing the space between text lines, the text-indent does the rest.

enter image description here


Simplifying noise by removing one of the visual typographic variation in different items and improving perception by associating cities and states by proximity.

(Gestalt Principle of Proximity)


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.