jQuery Autocomplete UI

Question

I have a model hierarchy that looks something like this:

Office
   |
   +-- Person

That is, every Office has multiple Person.

I want to allow a user to select a Person using an autocomplete text input field (using jQuery UI Autocomplete). In this text input field, I allow the user to type text, which is matched server-side against the last name, first name, and login of the Person to find matches to suggest to the user while he/she is typing.

Recently I ran into the problem where sometimes users only know limited info, like the Office name and the first name of the Person. They can't simply type "John" into the autocomplete field, as it will match hundreds of "John"s, and they have to scroll through all of these, searching for the one in the right Office.

My question is, what's the best way to allow users to search for a Person using criteria from both Office and Person?

I'd prefer to keep the UI as sleek and minimal as possible, so I'm trying to stay away from multiple fields, overlayed lookup popups, and things of that nature.

Answer 1

Check out http://jquery.bassistance.de/autocomplete/demo/ then click

"Click here for an autocomplete inside a thickbox window."

For a demo on their plugin. This implements compound autocomplete, which you could use to maybe use Person as the primary record and the office as the smaller information on the bottom. It may take some tweaking to get it to match the way you want, such that a space would start a new expression.

Example:

currently john west does not match

John Smith
Office: West Park

but delimiting by space for a new expression would match the name and office simultaneously.

You can, however, currently match that entry by typing either John or west

Answer 2

Maybe give them a way to tag the Office portion of the search string? Like @office so a user could type john@scranton or john smith @scranton.

Answer 3

I'd first give them an optional dropdown to select Office, and then populate the auto complete with each Person from the Office. You could then include functionality that would allow them to select a Person first instead, and that would also populate the Office.