Best Method to Present a Many to Many Form to User

Question

I have a questions about how to best present a form based off a many to many relationship to a user. I'll explain my models to help give an idea of what data I need to present.

Models and Relationships
   Shipment  has_many :products :through => :shipment_products
   Product   has_many :shipments :through => :shipment_products
   ShipmentProducts belongs_to :shipment,  belongs_to :product

So basically I have A shipment form that has the necessary data to create a bill of lading. In addition to that form, I need to select multiple products and their quantities. I've had a similar issue in the past where I used drag and drop, but I was unhappy with the experience being a little cumbersome. In this case I believe there would be too many products to list in a container to be able to drag and drop.

So what I need is a form that will allow me to fill out the shipment data, search for a product, select the product, add the quantity, and associate that with a shipment. What is the most effective way of designing my form so these items are presented clearly to my end user?

Answer 1

It's a rather simple form. At the very basic level, it's a shopping cart that is filled not from product pages but from the cart/order summary page. Thus, you need 2 main sections: finding/adding the product and the summary view of everything that is already in the shipment.

The find-and-add function is best accomplished with a simple free-form text box that has autocomplete script monitoring it and suggesting matches. It should accept both product names & SKUs (or any other identifiers you have in your system).

The shipment summary section can be a simple table showing the basic info (SKU & Name), the quantity (with the ability to change it on the fly), and any additional actions (such as delete).

Here's a very rough mock-up:

^{download bmml source – Wireframes created with Balsamiq Mockups}