（JavaScriptを使用せずに）選択可能なオプションを大量に提供する最良の方法は？
私はstackoverflowの出身で、これに対する答えはないので、UI担当者にサポートを依頼します。
ユーザー（司書）がデータベースに本を追加できるライブラリアプリケーションがあるとします。機能の1つは、特定の本に著者をタグ付けすることです。書籍には複数の著者がいる可能性があるため、複数のタグを許可するUIが必要です。基本的な機能サイトからJS/CSS拡張バージョンまで、プログレッシブ拡張アプローチにしたがっています。
私はすでに少なくとも450人の著者のデータベースを持っています。拡張バージョンでは、オートコンプリートおよび編集可能な選択が私の武器にあり、効果的であることが証明されています。問題は、基本的なバージョン、特にモバイルデバイスや機能のないブラウザ（opera miniのような？）など）にあります。
プログラマーの視点から、複数選択<select>ボックスはすべきです。しかし、UXの本を3冊以上読んで、複数選択<select>は、選択が複数有効であることを（明示的に言及されていない限り）指示がないため、「ノーゴー」です。また、長押しする必要があるため、身体に障害のある人には不向き Command （Mac）または Ctrl （PC）複数選択に。モバイルブラウザにもこれらのキーはありません。これに追加するには、1つのボックスに450以上の選択肢がありますか？
要約すれば：
- 選択できる450以上のアイテム
- 複数のアイテムを選択する
- プログレッシブエンハンスメントアプローチ
- これは基本ビュー用です（JavaScriptなし、CSS限定）
- 主に非近代的で機能が限定されたブラウジングデバイス（opera JavaScript機能を持たないミニおよびモバイルブラウザなど）を対象としています）
この状況に対処する最良の方法は何ですか？彼らはどのようにしてWeb 2.0より前にこれを実現しましたか？
450以上の値を持つドロップダウンは、デスクトップを含むどのデバイスでも非常に使用できません。しかし、基本的なモバイルバージョンのソリューションのみを探していると言っているので、それに固執しましょう。
おそらく、モバイルでこれを簡略化する最良の方法は、最初の画面/ポップアップにアルファベットを表示させ、文字をタップすると、その文字で始まる著者のリストにドリルダウンすることです。最も一般的な文字であっても、文字ごとの最大のリストは、簡単にスクロールできる約30〜40の値にする必要があります。次に、名前をタップして選択し、[戻る]を押してアルファベットに戻り、[完了]を押すまで追加の著者を選択します。これは、単純な線形ナビゲーションに基づくモバイルの最も標準的なアプローチです。
もっと良い方法は電話帳アプリに似たものを開発することですが、JSなしでWebアプリでそれを行うことはできないと思います。
オートコンプリートを使用しない限り、特に複数の選択を許可する場合でも、450以上のオプションを含むリストはユーザーフレンドリーではなく、常に使いにくいです。
図書館に本を追加するタスクは非常に一般的なものであり、迅速に実行する必要があるため、次の2つの簡単な手順を使用して、よりシンプルなバックエンド駆動のソリューションを提案します。
- 最初に、ユーザーには著者名を入力するだけの簡単な入力フィールドが表示されます。複数の著者の場合、それらは単にカンマで区切られます。
- 送信時に、バックエンドはそれらのエントリを分割し、それらの既存のデータベースエントリを見つけようとします。ユニークな一致を見つけた場合は、その著者を選択します。複数の可能性がある場合は、それらすべてを保持してください。
- 結果をユーザーに提示して、確認してもらいます。複数の可能性がある場合は、単純な選択ボックスを使用して正しい一致を選択するようにしてください。一致するものが見つからなかった場合は、そのステップで著者を作成できるようにします（さらに詳細な情報も要求する場合があります）。見つかったカンマ区切りの値ごとにそれを行います。
- 最終的な提出時には、すべての情報が必要です。
IOS Mailアプリで得られるようなものを試してみませんか。
- 単純なテキスト入力フィールド
- 自動候補のドロップダウン（Google検索と同様）
- 単一のアイテム（ケースではauthorなど）を追加したら、 + 入力フィールドの最後にあるボタン（以前に入力したアイテムは1つずつ削除できます。）
このソリューションは、スマートフォンやデスクトップでも簡単に使用できます。 100以上の要素については、ある種の「検索」ソリューションを使用する必要があると思います。
プログレッシブエンハンスメントを行っていることは素晴らしいことです！しかし、あなたは何もないところにあなた自身のための問題を作成しています。
UXのアプローチは、ユーザーと、製品が使用されている環境について考えることです。だからあなたの懸念を見てみましょう：
リストボックスを長押しする必要があります CTRL または Command 複数のアイテムを選択する。これは、障害のあるユーザーにとってはあまりアクセスしにくいものです。
- ユーザー（ライブラリアン）の何人が、片手で必要なキーを押しながらもう一方の手でマウスを動かすことができないほどの重度の運動障害を抱えていますか？ -それほど多くない。
- 運動障害を持つ人々がキーボードを効率的に使用できるようにする支援技術はありますか？ -はい（画面キーボードと特別な物理キーボード）。
ユーザーが押し続けることを知らないため、リストボックスでの複数選択はアフォーダンスが低くなります CTRL または Command。
- 複数選択のアフォーダンスを改善できますか？ -はい、明示的な指示を含めることができます。
モバイルデバイスにはありません CTRL または Command キー、またはJavaScriptに対応していないブラウザを使用している可能性があります。
- システムはどのくらいの頻度でモバイルデバイスから使用されますか？ -たぶんたまに。
- デバイスにないもの CTRL または Command キー？ -ほぼすべて。
- 主にどのデバイスがOpera Miniおよびその他のJavaScriptに対応していないブラウザを使用していますか？-古いデバイス。
- これらの古いデバイスには他にどのような特徴がありますか？ -CPUのパフォーマンスが低く、画面が小さく、インターネット接続が遅い。
- そのようなデバイスで450以上のアイテムリストはどの程度使用できますか？ -レンダリングとスクロールが遅いため、使用できません。
- 机から離れて本の情報を入力するためにどのようなデバイスが使用される可能性がありますか？ -必要なテキスト入力量が多いため、タブレットなど。
- それらのデバイスは最新のJavaScriptをサポートしていますか？ -もちろんです。
上記のすべてを統合することで、モバイルデバイスや障害を持つユーザーのリストボックスについて心配する必要はありません。実際、最も単純なモバイルバージョンを読み取り専用にして、そこから編集および作成機能を削除して、ユーザーが試さないようにする必要があります。同時に、リストボックスは、ユーザーに複数のアイテムの選択方法を指示する限り、デスクトップブラウザーの最も単純なバージョンの誰でも完全に使用できます。
私は、すべての著者を含む単一のドロップダウンボックスでWebページを開始します。次に、その下に、「別の著者を追加する」というチェックボックスがあります。これは、おそらくJavaScriptを介して予想どおりの動作を行い、ユーザーは作者を追加し続けることができます。
私は最近複数選択を行う必要があり、複数選択ボックスでは列に追加のデータを表示できず、ユーザーはどの場合でも複数選択ボックスの使用方法を知りません。
そこで、スクロールバー付きのdivを作成しました。あなたのケースでは、あなたのスタイルに合うように複数のdivを作成できます（たとえば、著者のアルファベットの文字ごとのdiv）。
ここに私があなたにアイデアを与えるために出てきた方法があります：
当然のことながら、お使いのデバイスに合わせて間隔とサイズを調整する必要があります。
これは単なる提案であることに注意してください。
JavaScriptを使用しなくても、サーバー側で何らかのオートコンプリートを使用してみることができます。
ユーザーはname（またはその一部）を手動で入力し、searchを押します。
その情報はサーバーによって処理され、可能な回答の簡単なhtmlリスト（チェックボックス付き）を返します。
下部に2つのボタンがあります：addとadd & complete
これにより、ユーザーは現在のリストから名前を追加してから、さらに追加するか、このリストから名前を追加して著者の追加を完了することができます。
私はUIの専門家ではないので、直感的に使用できるかどうかはわかりませんが、技術的な面では問題ありません。