web-dev-qa-db-ja.com

レスポンシブコンボボックスを表示する最善の方法はどれですか。

電話、大画面、タブレット用の検索フィルターを備えたcomoboboxを実装したいと思います。以下の例は、電話や大画面でどのように動作するかを示しています。私はまだタブレットについて疑問を抱いています。

電話

Triggering searchPhone combobox overlay

  1. 電話の場合、私の考えは、ユーザーが「Go」を押したときにユーザーが入力してディスプレイをトリガーすることです。この背後にある考え方は、明示的なボタンヒットなしにオーバーレイをスローしないことです。 何か考えはありますか?

  2. 懸念事項:コンボボックスはコンボボックスのようには見えません。しかし、検索フィールドの要件のため、私にはまだ正しいようです。 考え?

大きな画面:大きな画面では、かなり簡単に見えます。

Desktop

ユーザーがコンボボックスをクリックすると、入力検索フィルター内の選択パネルが表示されます。コンボボックスのように機能します。

タブレット 3.タブレットに最適なアプローチは何でしょうか。縦向きモードのタブレットは電話と同じように動作するのが標準だと思いますが、横向きモードでは何をすべきかわからないです。画面全体を占めるオーバーレイは私には扱いにくいように思われ、デスクトップ版も収まらないようです。

どんな助けでも大歓迎です。ありがとう。

編集: 4. 複数選択は必須。理想的には、これはコンポーネントのパラメータになります(つまり、multi-select = "on | off")。

  1. Dataは、フィルターが更新されるたびにサーバーからプルされます。ユーザーがフィルターとして入力する文字列に応じて、サーバーから少なくとも0〜5000の応答を期待できます。

  2. カスタムオプションはスクリーンショットでは指定されていませんが、必ず発生します。単純な1行のテストの代わりに、画像、名前、一意の識別子など、より有益なコンテンツを提供したいと思いました。

4
Leandro

複数選択+フィルターを使用してこのようなことを行い、リストを検索できます。

example

1
Franck