Quickly and intuitively entering quantity and item

Question

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.

Answer 1

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}