CODEWITHSUNDEEP
htmlajaxinterface
theotherlight
theotherlight

Reputation: 783

Viable selectbox alternatives to replace huge lists of items?

I'm wondering if there are any viable interface alternatives to using select boxes where there exists very large lists of data (1000+).

For example, in my application, I have a form that shows the details for a single inventory item (it's a pretty basic inventory management application). When an inventory is shipped out, warehouse staff need to mark the product as 'Out' and select the order # that it is being shipped out against.

For the last bit, this order # select has just been a drop down of existing order numbers in the system (1, 2, 3,... etc). Now the number of orders is getting larger (now over 1k), and obviously this is making pages a lot larger (from generating the large HTML list of <option> tags).

Are there any good (creative?) alternatives to using select boxes for this sort of data? I've considered using an Ajax-type suggestion box, but this seems a bit strange for someone simply entering a couple of digits. I also want to avoid as many data integrity checks as possible on the interface end -- it was pretty hard to enter/select an order number that doesn't exist if it's not in the <select> drop-down list.

I'm not afraid of Ajax by any means, just looking for other options where my Google searches and knowledge of good interface design falls short.

Thanks everyone!

Upvotes: 3

Views: 1011

Answers (2)

H. Green
H. Green

Reputation: 755

I would highly recommmend the Scriptaculous Auto-Completer widget (http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter).

It really simplifies the AJAX implementation and lets you use a server side processing language (php/jsp) to do the heavy lifting of figuring out what the best matching data set for the user is before displaying it to them.

I'm all for keeping things simple and a semi-intelligent suggestion list ala google search box is very intuitive for most people.

For a really nifty twist you could do AJAX on the previous data inputs of your order completion form to further prune the set of possible order numbers that are entered before the user even begins to type in the order # box (assuming that data is available to your back-end processor, which from the above comments look like that is feasible).

Upvotes: 1

Jacob G
Jacob G

Reputation: 3665

Can you filter the list of displayed Order Numbers to those orders that have not been fully fulfilled? Would that reduce the number of orders significantly enough?

Edit
Based on the comments, I would try one of the following things:

1- Add another, preliminary dropdown to filter the orders. Maybe the Sales Rep Name or the state the product is being shipped to. Based on the selection in the box, I'd Ajax-y get the relevant orders.

2- If #1 didn't work, I'd add a button to popup a Div overlay containing the Order Numbers. I'd get the order numbers Ajax-y on the button click and then throw them away once the order was chosen.

Upvotes: 1

Related Questions