For browser based web application, I need the user to select a customer from thousands of available customers. The user may have the ID of the given customer or just the Full Name & Address. In case the ID is provided, then then user should directly select the customer with the given ID. In case ID is not available, then the name must be selected. I need to show the user the Fullname and Address of the customers combined. The user should not have to browse through those thousands of customers and at thee same time downloading those thousands of records every time is not feasible. So, what are the best user interface options for this? A working example would be a great help.
-
1similar question: ux.stackexchange.com/q/33611/3987– icc97Jan 27, 2013 at 7:28
-
Please show the work that you have already done. As your question stands you are asking us to come up with a solution for you without you having shown us what effort you have put into it first.– JohnGB ♦Jan 27, 2013 at 13:52
2 Answers
I've found a UI widget like this one (JS) to be helpful:
http://ivaynberg.github.com/select2/
Some of the features that you would probably use:
- Looks and behaves like a select box, but with search functionality.
- Allows search, with a custom matcher if you need it (so you could check by ID or by name, address etc)
- Allows loading of remote data sources, and it can load only the relevant search results if that is more efficient for your use case
- Allows custom formatting of the contents of each item in the drop down, so you could display Customer ID, name etc.
Downsides:
- It's not very touch friendly
If you're targeting HTML/JS, I'd recommend it highly, otherwise, look for something similar on your given platform. For a touch interface, you'd probably want something quite different, I'd take a look at how other apps are doing search (eg. Facebook searching for a person's name)
Good luck
Are users supposed to know client IDs and names? If it is so I would suggest to use an autocomplete (Google like) displaying results at the bottom of the search box. You could also provide a checkbox to select "search by name" or "search by ID".