一个非常长的下拉菜单的替代品是什么？ [英] What are the alternatives to a very long dropdown?

问题描述

我的数据库中有大约350个产品，目前我关心的是我的后端。
如果我想选择一个产品，我在后端使用本机下拉菜单，但是很难看到下拉菜单中的滚动条（如此之小），需要大量的时间来搜索

我想要一个下拉菜单的替代品，我可以很快选择一个产品。

2个注释：

1. 我没有足够的空间显示产品


2. 我的产品分类为

我知道这个问题很广泛，但我已经尽可能缩小了。

解决方案

如果您的客户不知道产品，您不应该自动完成。

您可以使用级联下拉菜单。选择过滤产品的类别。

在更改类别时，您将重新过滤产品：

  $ 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）值+< / option>）; 
}; 
}）; 
} 
  

getProducts（）如果您不想一次下拉所有产品，也可以是ajax电话。以上仅仅是一个例子。

演示版 - 按类别过滤产品 - 编辑为包含订单项样本

但是，完全不同的选项可能是根据您的类别选择来呈现产品的图形列表

例如，类似于：

  function renderProductDetail（productName ）{
 var lineItem =< br />< div>< img src ='http：//www.placehold.it/140x100'/>< span> + productName +：详细信息可以在这里....< / span>< button type'button'>选择< / button>< / div>; 
 $ productDetails.append（lineItem）; 
} 
  

客户将为每个产品提供一个图像和描述。每个项目都有一个小的选择按钮/链接，等等。

大多数网站都是销售产品，komplett，dabs，amazon等等。 ..

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:

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

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

解决方案

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...

这篇关于一个非常长的下拉菜单的替代品是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！