I am trying to find an intuitive input control to create a list of QUANTITY x ITEM lines. The items already exist in the database and the simplest way to do this would be:


In order to make it faster to input the lines I thought about leaving it a plain text field that on Enter it would just add an <li> to a <ul> with a link to remove the line like so:


I am not so sure though how would the autocomplete work best and if there is a simple plugin like chosen that can accept free-form text ("3x") and autocomplete values ("Goblin") in a text input or a text area.

  • how many different types of items do you have? who is the target user? – Jung Lee Apr 6 '12 at 2:07
  • The target user is the typical D&D Dungeon Master (a geek and usually computer-savvy). The item types will have been entered by the user ahead of time and will usually enumerate in the few tens to about a couple hundreds. – Kostas Apr 6 '12 at 6:47
  • Between typing "3x Goblin" into a single field, and typing "3" and "Goblin" into two separate fields, the latter is more efficient, no? It requires one less key stroke, "TAB" vs "X"+"spacebar". Otherwise I think your second mockup is about as efficient as you can get for keyboard entry – Jung Lee Apr 6 '12 at 13:49

Have you considered an autocomplete box and a list? The autocomplete box will ensure correct entry and the list will assist in managing the numbers.

I think if you allow users to enter free text then it adds one more element of difficulty on your side to parse and process the data. I like your idea of allowing free text so I think the autocomplete could be a compromise.

The list with buttons to incr/decr quantity is an idea I stole from online shopping sites. Also a delete/remove button could be included for each item.


download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    Setting sensible defaults for item numbers can go a long way with this design (if they are applicable to your data, of course). Kobolds may always come in bands of ten, but a dragon is a solitary beast :-) – Alex Apr 6 '12 at 6:05
  • The parsing part is easy (have done it before on an almost identical scenario). On your answer: the elements clutter of the shopping carts is what I am trying to avoid. That's why (on the second mockup) instead of having +/- controls near the quantity, I simply have a remove link. Also, the list, in most cases, will have been thought of ahead in time so later adjustments will be rare. – Kostas Apr 6 '12 at 6:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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