入力要素のデータリスト項目のフィルタリングを避ける

Webアプリケーションでコンボボックスの動作が必要です。私は、次の解決策に出くわした：入力要素のデータリスト項目のフィルタリングを避ける

<input type="text" list="options" > 
 
<datalist id="options" > 
 
    <option>Asterix</option> 
 
    <option>Obelix</option> 
 
</datalist>

しかし、とすぐに任意のテキストが入力されると、FirefoxとChromeはユーザーだけに、すでに入力されたテキストに合うこれらのオプションを示しています。この例では、入力に文字「A」が含まれるとすぐに、ブラウザはAsterixのみをオプションとして提供しますが、Obelixは非表示にします。

私は、input要素の中に書かれているものにかかわらず、データリストのすべてのエントリをユーザに見せたいと思います。しかし、カスタム入力も許可したいと思います。この例では、ユーザーはMethusalixと入力する必要があります。そうした場合、ブラウザにAsterixとObelixを選択肢として表示したいと思います。 HTML5ではどのようにこれを達成できますか？私はこの動作を許可するいくつかのオプションがあると確信していますが、私はそれを見つけることができません。

これを使用して、ユーザーが複数の構成エントリの間で選択できるようにしています。ユーザーは、既存の構成エントリから選択するか、またはまだ存在しない名前を書き込んで新しいエントリを作成することができます。ただし、破棄された新しい名前の付け方にかかわらず、いつでも既存のものに戻ることができるようにしたいと考えています。

出典

2017-01-16 Georg

あなたの質問は？ –

@ Tha'erAl-Ajlouni：私は質問を編集しました。今はっきりしていることを願っています。 – Georg

jQuery UI Autocompleteのカスタマイズされた実装で行うことができます。

ライブラリは独自のUI要素を使用するため、検索および/または応答メソッドをオーバーライドすることでドロップダウンの動作を変更できるため、常にすべての項目が返されます。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>autocomplete demo</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
</head> 
<body> 

<label for="autocomplete">Select: </label> 
<input id="autocomplete"> 

<script> 
var data = [ 
    {label: "Item 1", value: '1'}, 
    {label: "Item 2", value: '2'} 
]; 

$("#autocomplete").autocomplete({ 
    minLength: 0, 
    source: function(request, response) { 
     response(data); 
    }, 
}); 
</script> 

</body> 
</html>

出典

2017-02-02 08:18:31 SpliFF

jQuery UI Autcompleteは機能しますが、自動フィルタリングを無効にする入力とデータリストの設定がないことは残念です。jquery-uiを使用すると、特別なクラス（ui-menu、ui-menu-item）を持つ新しいリストとアイテムが紹介されます。 – crusarovid

ユーザーの入力が問題にならない場合は、datalist要素の使用のポイントが表示されません。

代わりに、ユーザーがテキストを入力できなくても、すべてのオプションを表示する従来のselect要素を選択できます。

<form> 
 
    <select name="options"> 
 
    <option>Asterix</option> 
 
    <option>Obelix</option> 
 
    </select> 
 
    <br><br> 
 
    <input type="submit"> 
 
</form>

あなたが最初に一致しないオプションを示すような異なる予想される動作を、持っている場合は、あなたの質問を拡張してください。

出典

2017-01-24 13:26:16 otorrillas

ブラウザに表示されるオプションはユーザーの入力に関係しませんが、まだリストにないものは入力する必要があります。 – Georg

提案が表示される方法は、仕様では説明されていませんが、通常はUIコントロールでオートコンプリートや提案がどのように実装されるかは異なります。

あなたが示唆するように、私は、あなた自身の提案UIをJavaScriptでコーディングし、ユーザーエクスペリエンスに関するユーザーエージェントの選択に依存しないで、あなたが望むことができると思う。

出典

2017-01-27 09:56:27 Reego

私は多くのUIライブラリについて詳しくは分かりませんが、Windows API、特に.NETのWindowsフォームでは、コンボボックスのデフォルトオプションとしてこれがあります。 – Georg

入力要素のデータリスト項目のフィルタリングを避ける

答えて

関連する問題