オートコンプリート/タイプアヘッド/モバイルでの入力と同時に検索ウィジェットの使いやすさ
誰かが次のシナリオのための良い解決策を持っているかどうか疑問に思っています。
ユーザーが作業しているWebアプリで、AJAXオートコンプリートリストの「ドロップダウン」が提供されているテキストフィールドに「フリーフォーム」と入力して、使いやすさと一貫性のあるデータの制約/強制に役立てることができます入力。
デスクトップブラウザーでは、チャームのように機能し、キーボード/マウスに非常に適しています（矢印キーでリストを移動し、タブ/ Enterキーで現在の一致を選択します）
モバイルデバイス（スマートフォン/タブレット）でオートコンプリート機能を提供したいさらにタッチスクリーンでの入力（特に句読点、英数字/数字の切り替え、大文字と小文字の変更）は、値を選択するのがシングルタップと同じくらい簡単な場合、非常にイライラすることがあります。
しかし、これは私の問題の核心を開きます。デフォルトでは、ほとんどのオンスクリーンキーボードが表示されるとき（フィールドフォーカス上）、テキストフィールドが（画面にとどまるために）押し上げられます上記キーボード。一般的に言えば、これはユーザーにできるだけ多くの「コンテキスト」情報を提供するので理想的です（たとえば、「電子メール確認フィールド」の値を入力すると、上記の元の値とフィールドラベルが非常に役立ちます。
私のシナリオでは、コンテキストはそれほど重要ではありません（フォームの唯一のフィールドとして、検索ボックスに入力することを考えてください）...そして、フィールドの前にニース記号アイコンを付けました。デフォルトのHTML5プレースホルダーテキストは、フィールドの目的（何らかの理由で明確でない場合）
同時に、ユーザーが入力するときにこのフィールドから「ドロップダウン」する結果は、キーボードの真上にフィールドが配置されているため、キーボードの下に隠れてしまいます。したがって、検出機能/使いやすさがヒットします。
このシナリオでは具体的には現在、画面を変更しました（モバイルデバイスの場合のみ 1 ）、フィールドがフォーカスを取得すると、上にスライドしますビューポートの...アイテムがドロップダウンリストに表示されたときに、それらが表示され、スクロール可能で、最も重要なのは簡単に選択できるようにするためです。
例えば〜おおよそこのように： 
私の質問は...このデフォルトの動作への微調整は許容できるように見えますか、それともよりうまく機能する代替ソリューションがありますか？ （たとえば、私が使用しているウィジェットには組み込まれていませんが、オプションをハックして「上」または「下」にドロップできると思います）
1 はいブラウザのスニッフィングがevilであることを知っています-非常に慎重な場合を除いて特に使いやすさを向上させるために追加されました;-)
ここで同じ問題に直面しています。 SaaSに新しいレスポンシブデザインを実装し、選択ボックスにSelect2を使用します。XSビュー（Bootstrap）で選択を入力すると、選択がwhole利用可能な画面です。小さなインターフェイスでは、実際に何が起こっているかを気にするユーザーはいないでしょう。代わりに、「何かを選択する」タスクに完全に専念しています。巨大なものを追加することさえ考えていますこのタッチキーボードの問題が原因で、ボックスの下部にある白いパッド。
自動提案の高さを下げてスクロールを適用すると効果がある場合があります。自動提案の右側のどこかに見つかった結果の数を表示すると、ユーザーフレンドリーになります。これは、ユーザーがスクロールするかどうかを決定するのに役立ちます。