0

私のデータベースには約 350 の製品があり、現在バックエンドについて心配しています。製品を選択したい場合のバックエンドで、ネイティブのドロップダウンを使用していますが、ドロップダウンのスクロール バーが非常に小さいため、検索に時間がかかります。

製品をすばやく選択できるドロップダウンの代替手段が必要です

2 メモ:

  1. 商品を展示するスペースがあまりない
  2. 私の製品は分類されています

この質問が非常に広いことは承知していますが、可能な限り絞り込みました。

4

5 に答える 5

4

これらのオプションを分類したので、1 つのドロップダウンを使用してカテゴリを選択し、その選択によって 2 番目にオプションを表示することができます。

あなたはバックエンド用だと言ったので、そのドロップダウンから選択している製品を知っていると思います. この場合、代替オプションはjQuery UI Autocompleteを使用することです。AJAX または静的 Javascript 配列で使用できます。

あなたが始めるために何かがあります。必要に応じて、いくつかの例を提供できます。

于 2012-09-15T11:36:09.907 に答える
1

顧客が商品を知らない場合は、オートコンプリートにしないでください。

カスケード ドロップダウンを使用できます。製品をフィルタリングするカテゴリを選択します。

カテゴリを変更すると、製品を再フィルタリングします。

$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>");
        };
    });
}

一度にすべてのgetProducts()製品をプルダウンしたくない場合は、ajax 呼び出しにすることもできます。上記はほんの一例です。

デモ- カテゴリによる製品のフィルタリング - 項目のサンプルを含むように編集

ただし、まったく別のオプションとして、カテゴリの選択に基づいて製品のグラフィカル リストを表示することもできます。

たとえば、次のようになります。

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);
}

そうすれば、顧客は各製品の画像と説明を取得できます。各項目の横には小さな選択ボタン/リンクがあります。

これは、製品、komplett、dabs、amazon などを販売するほとんどの Web サイトで行われている方法です。

于 2012-09-15T12:03:29.597 に答える
0

製品のカテゴリを含むドロップダウンを使用する必要があり、名前の前に + 記号があり、クリックするとその製品が表示され、名前の前にチェックボックスがあり、そこから選択します..

于 2012-09-15T11:35:01.273 に答える
0

製品をサブカテゴリに分割する必要があり、次に2つのドロップダウンを配置します

1 つはメイン カテゴリ
用、もう 1 つはそれぞれのサブ カテゴリ用です。

1 つのメイン カテゴリが選択されているかのように、2 番目のドロップダウンを維持する必要があり、関連するものだけが 2 番目のドロップダウンのオプションになります。

オートコンプリートを使用したかのように、ユーザーフレンドリーではなく、ユーザーが製品を知らない可能性があります

于 2012-09-15T11:37:22.083 に答える
0

製品のカテゴリが既にある場合、最も適切なオプションは、メニュー スタイルのフライアウト メニューを使用することです。

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

于 2012-09-15T11:38:00.620 に答える