web-dev-qa-db-ja.com

大きなドロップダウン選択リストの代わりは何ですか?

すべての国(約200以上のアイテム)のリストを含む単一の選択ドロップダウンを追加しています。

Windowsでは、一度に10〜15か国を表示し、スクロールバーが表示されるため、問題なく動作します。 Macでは、ドロップダウンにすべてのアイテムが一度に表示されます。ユーザーは、目的のアイテムを探すためにすべてのアイテムを下にスクロールする必要があります。

スペルチェックが必要な場合があるため、テキストフィールドを使用していません。

複数のコンピューター間で同様に機能する大きなドロップダウン選択リストに代わるものは何ですか?

27
silenthokage

ドロップダウンはユーザーを困らせると私は言うでしょう、そしてあなたは単にテキスト入力を使用し、ユーザーに必須フィールドに入力できることを伝えるべきです。
しかし、ドロップダウンメニューに代わるものがない場合、私たちにできることはほとんどありません。これは、Safariユーザーだけが直面していることであり、すでに慣れているため、UIに期待される動作です。

ちなみに、ユーザーが次のようなホットキーで移動するのに役立つスクリプトを使用できます。 A 「a」で始まる最初の国名が表示されます。

4
jdniki

なんらかの検索機能を実装することをお勧めします。ドロップダウン検索ハイブリッド要素は非常に人気があり、これを解決する良い方法です。

Select2 は、このようなハイブリッドドロップダウンを構築するために一般的に使用されるJavaScriptライブラリです。

20
user43790

http://harvesthq.github.io/chosen/

選択は、ドロップダウン内の大量のデータに対して非常に洗練されたソリューションです。国のドロップダウンだけに関心がある場合は、リラックスしてください。ユーザーはリストから国を選択するために使用され、キーボードを使用して目的の国にすばやくジャンプします。

6
Bobby Tables

プロジェクトの1つで、巨大なドロップダウンを、上部にテーブルとフィルターがあるモーダルダイアログに置き換えました。それをポップアップルックアップテーブルと呼びます。

したがって、ドロップダウンの代わりに、そこにテキスト入力のすぐ横に読み取り専用のテキストボックスを配置します。「選択」というリンクは、ユーザーがリンクをクリックすると、上部にテーブルとフィルターがあるモーダルダイアログを開き、ユーザーは検索スローデータ、テーブルから行の1つを選択し、ダイアログフッターの[選択]ボタンをクリックしてダイアログを閉じ、選択した値を読み取り専用のテキスト入力に表示します。

利点:-さまざまな基準に基づいてレコードを検索する機能が向上します-テーブルはより多くのデータ属性を表示できるため、選択前のデータの視覚化が向上します

3
Sudhir N

しかし、なぜドロップダウンを使用するのか、ユーザーが国を入力するたびにテキストボックスを使用して検索ボックスのように実行するのは、国名がキーワードパターンと一致することを示します。国名が入力された国名テキストボックスをクリックした後。

3
Parth

カテゴリを実装する必要があると思います。ドロップダウンに国が表示されている場合、国をカテゴリにグループ化する方が良いでしょうか?つまり、2つのドロップダウンがあります。1つはおそらく大陸に関するもので、もう1つはその大陸内の国に関するものです。ドロップダウンテキストを使用することもできます。この場合、選択肢を入力することもでき、ドロップダウンはメニューの選択肢に基づいてオートコンプリートします。または、独自の国のドロップダウンメニューを作成することもできます。これには、国だけでなく右の国もリストされます。このようにして、ユーザーは、強制的に下にスクロールする前に、より多くのオプションを表示できます。また、ドロップダウンでリストをいくつかの列に分割しているため、スクロールダウンはそれほど長くありません。

1
Chen Li Yong

高速に動作させるには、テキストボックスでauto-suggest機能を使用する必要があります。ユーザーが覚えているキーストロークを押すと、Word全体が候補として表示されます。

例:ユーザーが都市を選択する必要がある場合。したがって、ユーザーがnyまたはnewと入力すると、new york結果で、これにより、ユーザーが目的のオプションを選択するためのプロセスが速くなり、より使いやすくなります

_optgroupを使用してドロップダウンリストをグループ化する他の方法

あなたはここで詳細全体を読むことができます- http://www.importux.com/drop-down-menus-common-misuse/

自動提案機能については、これを参照してください- http://api.jqueryui.com/autocomplete/#entry-examples

1
Rohit Agrawal

200-300はスクロールするのにそれほど悪くありません。新しい国はあまり多くないので、リストは比較的ゆっくりと成長しています。

ユーザーがスクロールバーなしでポップアップするリストに上位m(通常は10)の結果を表示する前に、少なくともn(通常は2)文字を入力する必要があるオートコンプリートを使用できます。

部分文字列検索はうまくいくと思います-キーを押すたびにテキストボックスに表示される文字列と正確に一致する上位mの国をアルファベット順に表示します。

0
Mickael Caruso

この記事には、特に国別オプションについてのすてきな推奨事項があります。ほとんどのモバイルデバイスとブラウザーは、ユーザーの場所の選択を絞り込むのに役立つ地理位置情報を提供できます。それらの場所がそこにない場合、またはプロキシを使用していて、場所が無効な場合は、デフォルトでリスト全体に戻すことができます。私はいくつかのグーグル検索に賭けるでしょう、あなたは地理的位置に基づいて選択オプションのリストを提供するのを助けるAPIを見つけることができます。

https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b5

0
nwolybug