web-dev-qa-db-ja.com

入力してユーザーに候補から選択させる方法

オートコンプリート入力フィールドでは、提案は通常オプションですが、ユーザーは何でも入力できます。

私はしたいforce提案されたリストから選択するユーザー。

私が考えることができる最良のオプションは、デフォルトで最初のオプションを選択することです(彼は入力を続けることができます)。結果が見つからない場合は、最後の文字を(再帰的に)削除します。

それはそうする正しい方法ですか?オンラインでのこの行動への言及はありますか?

5
ΞΫΛL

このコントロールを完全に自由に設計できますか?この要件に対応するGUIコントロールを設計する場合、2つの方法を検討します。

1つは、文字を完全に拒否することです。これにより、これまでに入力された入力は、どの一致でも実行可能なプレフィックスではなくなります。のように、タイプすることを不可能にしますが、キャラクターが拒否されているというある種のフィードバックがあります。 (入力フィールドで何らかの視覚的現象が発生し、音が発生します。インターフェースが応答しなくなったように見えることはありません。)

別のアプローチは、ユーザーが任意の入力を入力できるようにすることですが(これはあなたが望んでいるようです)、構文の色付けを適用して有効な接頭辞と無効な接尾辞を区別します。完了しない文字は赤などに着色される可能性があり、GUIは無効なサフィックスとしてフラグが立てられた末尾部分が含まれている間、その入力が送信されないようにします。

ユーザーは自分の間違いを認識し、フラグが立てられたキャラクターの上にバックスペースを置くことができます。

常に、可能な選択肢が表示されている必要があります(多すぎない場合は、適切な方法でリストを圧縮する必要があります)。ユーザーが選択肢の1つにショートカットするだけで済むはずです。

1
Kaz

コンボボックス(テキストボックス/ドロップダウン)は、ユーザーが好きなように選択できるという期待を生み出します。ユーザーが新しい選択肢を提供できない場合は、このコントロールを使用しないことをお勧めします。代わりに、通常のドロップダウンコントロールを提供します。これにより、ユーザーはほとんどのユーザーインターフェイスを入力して選択できます。

特に、任意に入力する機能を保持することを選択した場合でも、それらの入力内容を黙って無視しないでください。リストにない選択肢を入力した場合は、システムに選択させるのではなく、手動で競合を解決する必要があります。たとえば、Ontarioの結果をOregonに自動切り替えするボックスに入力すると(フォームは米国のみであるため)、それよりもはるかに多くの問題が発生します。解決します。

2
Myrddin Emrys

その場合、それはドロップダウン/選択コンボボックスのようです。

Vaadinフレームワークのサンプラーでそれのバージョン [〜#〜]ここ[〜#〜] を試すことができます。

1
AndroidHustle

それは実際にユーザーに提供する回答またはオプションの数に依存します。それが何百もの選択肢のフィールドである場合、ドロップダウンリストは扱いにくく、永久にスクロールします。 10〜20程度しか話していない場合は、ドロップダウンで十分です。

リストが大きい場合は、自動入力するリストからユーザーが入力して回答し、選択できるようにします。 @AndroidHustleはVaadinフレームワークの良い例を示しました。

これは、入力中に入力され、事前に決定された回答の1つのみを受け入れるリストの別の例です。

http://jqueryui.com/demos/autocomplete/

1
Stephen

これを行うには、クライアント側またはサーバー側の検証を使用できます。 DOJOのFilteringSelectウィジェットに似たものを使用します。 http://dojotoolkit.org/reference-guide/1.7/dijit/form/FilteringSelect.html#dijit-form-filteringselect

サーバー側では、入力を検証し、「構成された」値を拒否できます。そしてもちろん、両方を組み合わせることができます。

もう1つのオプションは、純粋なコンボ(SELECT)を使用することです。多くのブラウザーは「先行入力」をサポートしています-その中の値を照会します。しかし、多くのユーザーはそれを知りません/使用しません。

1