[解決済み] データリストのラベルを表示し、実際の値を送信する

質問

現在、HTML5の <datalist> 要素はほとんどの主要なブラウザ (Safari を除く) でサポートされており、入力に提案を追加するための興味深い方法のように思われます。

しかしながら value 属性の実装と <option> . 例えば

<input list="answers" name="answer">
<datalist id="answers">
  <option value="42">The answer</option>
</datalist>

これはブラウザによって扱いが異なります。

ChromeとOperaです。

FireFoxとIE 11です。

1つを選択した後、入力は値で満たされ、内側のテキストではありません。私はユーザーにドロップダウンと入力のテキスト ("The answer") を見せたいだけで、値は渡します。 42 のように、送信時に select のようになります。

のラベル（内側のテキスト）がドロップダウンリストに表示されるようにするには、どのブラウザも <option> のラベルは表示されますが value 属性を送信しますか？

どのように解決するのですか？

以下のことに注意してください。 datalist は select . これは、ユーザーがリストにないカスタム値を入力することを可能にし、最初に定義することなく、そのような入力に対して代替値を取得することは不可能です。

ユーザーの入力を処理する方法として、入力された値をそのまま送信する、空白の値を送信する、または送信を阻止することが考えられます。この回答では、最初の2つのオプションのみを扱います。

ユーザからの入力を完全に拒否したい場合は、おそらく select の方が良い選択でしょう。

のテキスト値のみを表示させるには option のテキスト値のみを表示するために、インナーテキストを使用し、ドロップダウン内の value 属性は無視します。実際に送信したい値は、カスタムの data-value 属性に格納されます。

これを投稿するには data-value を送信するには <input type="hidden"> . この場合 name="answer" を取り除き、隠しコピーに移動します。

<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
    <option data-value="42">The answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

この方法では、元の入力のテキストが変更されたときに、javascriptを使用して、そのテキストが datalist にあるかどうかを調べ、その data-value . その値が hidden input に挿入され、送信されます。

document.querySelector('input[list]').addEventListener('input', function(e) {
    var input = e.target,
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option'),
        hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
        inputValue = input.value;

    hiddenInput.value = inputValue;

    for(var i = 0; i < options.length; i++) {
        var option = options[i];

        if(option.innerText === inputValue) {
            hiddenInput.value = option.getAttribute('data-value');
            break;
        }
    }
});

idは answer と answer-hidden は、スクリプトがどの入力がどの隠しバージョンに属しているかを知るために必要なものです。このようにすると、複数の input を使うことができます。 datalist が提案します。

任意のユーザー入力はそのまま送信されます。ユーザー入力がdatalistに存在しない場合に空の値を送信するには、以下のように変更します。 hiddenInput.value = inputValue を hiddenInput.value = ""

jsFiddleの動作例です。 プレーンなjavascript と jQuery