web-dev-qa-db-ja.com

タイプアヘッド/オートコンプリートのグレースフルデグラデーション

ユーザーが固定リストから1つのアイテムを選択するように求められた場合を考えてみます。

リストに12を超える項目が含まれている場合、オートコンプリート/タイプアヘッドタイプのウィジェットは、非常にユーザーフレンドリーで使いやすいことが証明されています。数文字入力すると、検索ボックスからフォーカスを奪うことなく、関連する一致を含むポップアップが表示されます(または更新されます)。探しているものが見つかったら、ポップアップからクリックするか、矢印キーで選択してEnterで確定します。

リストのアイテム数が数百未満の場合、HTMLのみで適切に機能する最適な構成は、単純な選択ボックスです。国のリスト(この記事の執筆時点では206)は、選択ボックスの使いやすさの限界にある典型的な例です。それより長いとダウンロードとレンダリングが重くなり、使用が面倒になります。

リストにthousandsのアイテムが含まれている場合、先行入力/オートコンプリートボックスの適切なHTMLのみの適切な低下とは何ですか

アイデア:

  1. ユーザーがテキストフィールドに好きなように入力するだけです。 Javascriptがなく、フォームを要約するだけの場合は、一致するアイテムを表示して検索を絞り込み、選択を行う中間ステップを表示できます。

    しかし、元のフォームに複数の先行入力ボックスが含まれている場合はどうなりますか?それぞれの選択を絞り込むための一連の中間ステップを表示しますか?

  2. 先行入力ボックスをボタンに置​​き換えます。*各ボタンは部分的なフォーム(サーバーの一時ストレージまたはセッションストレージに保存される)を送信し、アイテムを検索して選択するためのすべてのツールを備えたページを表示します。ユーザーが選択したら、半分満たされたフォームに戻り、続行します。

  3. 先行入力ボックスをiframes *に置き換えます(たとえば、高さが5〜10行で、テキストエリアと同じ大きさです)。各iframeにより、メインフォームを中断することなく、サーバーに保存される独立した検索と選択を実行できます。

他のアイデアは?

_____________
*もちろん、技術的には逆です。劣化したインターフェースをHTMLに入れ、JSを使用してそれをオートコンプリートに置き換えます。

4
Tobia

優雅な低下を要求しました...これは理想的ではありませんが、アイデア1のバリエーションは妥当な動作をします。

横に検索ボタンがあるテキストフィールドをユーザーに提供します。ユーザーは検索文字列を入力して検索をヒットします。ページを更新して、ラジオ選択として最も一致するもののリストを表示します。

ユーザーはオプションを選択するか、再度検索するかを選択できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

これをフォーム上の大きなブロックとして現実的に扱うことができるので、これらの複数を問題なく使用できます。これがサーバー側にどのような影響を与えるかはわかりません。

4
nightning