What are the alternatives to a very long dropdown?

Question

I have about 350 products in my database and I'm currently concerned about my backend. At the back end if I want to select a product, I'm using a native dropdown, but its very daunting to see the scroll bar of the dropdown (so small), takes a lot of time to search

I want some alternative to a dropdown through which I can select a product very quickly

2 notes:

I don't have much space to show the products
My products are categorized

I know this question is very broad, but I have narrowed it down as much as possible.

so why don't you just go with 2 level menu `category > products` ? — Zoltan Toth, Sep 15 '12 at 11:33
@above everyone , all right i can group my products into categories however , the amount of scrolling i will have to do for selecting a product will be more or less the same — Nishant Jani, Sep 15 '12 at 11:34
@user1537158: There is several options of which auto-complete is the least effective if customers don't know the products. Cascading dropdowns is one option as explained as well by `Tom`. There is also another option. Customer like to see what they select and most sites show products in graphical line-items with an image, a description and a select link/button behind each one. This may not apply to you at all off course and cascading dropdown is all you need/want. I did add both options to my answer as well as a demo though to offer some options. — Nope, Sep 15 '12 at 12:21

Tom · Answer 1 · 2012-09-15T11:55:56.457

Since you have categorized those options, maybe you could use one dropdown to select category, and show options on second by its selection.

Since you said its for backend, i assume you know what product you are selection from that dropdown. In this case, an alternate option might be using jQuery UI Autocomplete. You can use it with AJAX, or with a static Javascript array.

Theres something to get you started. I can provide some examples if necessary.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

If your customers don't know the products you should not make it auto-complete.

You can have cascading dropdowns. Select a category which filters the product.

On changing the category you re-filter the products:

$categories.on("change", function(){
    getProducts();
});

function getProducts() {
    $products.empty();

    var category = $categories.val();

    products.forEach(function(product) {
        if (product.category === category) {
            $products.append("<option>" + product.value + "</option>");
        };
    });
}

The getProducts() can also be an ajax call if you don't want to pull down all the products at once. The above is only an example.

DEMO - Filtering Products by category - Edited to include sample of line items

However, a completely different option could be to render out a graphical list of products based on your category selection.

For example, similar to:

function renderProductDetail(productName){
    var lineItem = "<br /><div><img src='http://www.placehold.it/140x100' /><span>" + productName + ": Details can go here....</span><button type'button'>Select</button></div>";
    $productDetails.append(lineItem);
}

That way the customer would have for each product an image and a description. Each item has a little select button/link beside it and so on.

That's how most web-sites do it that sell products, komplett, dabs, amazon, etc...

wow , how do u write that amount of code so fast , thanks that helps cascading dropdows — Nishant Jani, Sep 15 '12 at 13:04
@user1537158: You are more than welcome. It's always good to have a few options available. Auto-Complete is a great option if the users know what they are looking for, cascading dropdowns are nice for minimising the amount of data shown and filtering, the line items are sweet if that is what you need to show of your products while letting users select them. — Nope, Sep 15 '12 at 13:07

score 0 · Answer 3 · answered Sep 15 '12 at 11:35

0

you have to use a dropdown which contains categories of products and at the front of name there is a + sign and when click on that products are shown and there is checkbox at the front of name and then select from it..

answered Sep 15 '12 at 11:35

Sunil Marwaha

123
8

score 0 · Answer 4 · answered Sep 15 '12 at 11:37

0

you need to devide products into sub categories and then you put two dropdowns

one for main category and
another for their respective sub categories,

and you have to maintain the second dropdown as if one main category is selected then its relevant only will be the options in the second dropdown

As if we used auto complete it never be the user friendly and the user may dont know the products

answered Sep 15 '12 at 11:37

GautamD31

28,552
10
64
85

what does the bold text mean ? – Nishant Jani Sep 15 '12 at 11:42
If we use auto complete the user dont know which products the database have..??right – GautamD31 Sep 15 '12 at 11:45
Dropdown is the best option than an auto complete as per the time concerns because the user dont have the option if we use dropdown,he can choose his product from that easely – GautamD31 Sep 15 '12 at 11:50

score 0 · Answer 5 · answered Sep 15 '12 at 11:38

0

Given you already have categories for your products, your tidiest option might be to use a menu-styled flyout menu:

http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

answered Sep 15 '12 at 11:38

Phil.Wheeler

16,748
10
99
155

im really not looking for styling , just faster selection of my products in minimal space – Nishant Jani Sep 15 '12 at 11:40
This sort of control isn't about style / appearance primarily so much as it's a usability enhancement that allows users to drill down to the product (in your case) they're specifically after. Often, this sort of control actually will lead to faster / more intuitive selection of an item that a garden-variety scrolling control. – Phil.Wheeler Sep 15 '12 at 11:44

What are the alternatives to a very long dropdown?

5 Answers5

DEMO - Filtering Products by category - Edited to include sample of line items

Linked