Show datalist labels but submit the actual value Ask Question

Question

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。その値は、非表示の入力に挿入され、送信されます。

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;
        }
    }
});

通常の入力と非表示の入力のIDanswerとanswer-hiddenは、スクリプトがどの入力がどの非表示バージョンに属しているかを認識するために必要です。これにより、input同じページに複数のを配置し、1 つ以上のでdatalist提案を提供することが可能になります。

ユーザー入力はそのまま送信されます。ユーザー入力がデータリストに存在しない場合に空の値を送信するには、次のようhiddenInput.value = inputValueに変更します。hiddenInput.value = ""

動作する jsFiddle の例:プレーンなJavaScriptそしてjQuery

Answer 1