web-dev-qa-db-ja.com

データリストのラベルを表示しますが、実際の値を送信します

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

ただし、value属性の実装と<option>の内部テキストとの間に矛盾があるようです。例えば：

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

これは、ブラウザごとに異なる方法で処理されます。

ChromeとOpera：
Datalist in Chrome/Opera

FireFoxおよびIE 11：
Datalist in FireFox

いずれかを選択すると、入力には内部テキストではなく値が入力されます。ユーザーにドロップダウンと入力にテキスト（ "The answer"）のみを表示したいのですが、送信時にselectのように値42を渡します。

すべてのブラウザで<option>sのラベル（内部テキスト）をドロップダウンリストに表示し、フォームの送信時にvalue属性を送信するにはどうすればよいですか？

javascripthtmlhtml5cross-browserhtml-datalist
68
Stephan Muller

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

スクリプトがどの入力がどの非表示バージョンに属しているかを知るには、通常および非表示の入力のID answerおよびanswer-hiddenが必要です。この方法では、複数のinputを同じページに配置して、1つ以上のdatalistで候補を提供できます。

ユーザー入力はそのまま送信されます。ユーザー入力がデータリストにないときに空の値を送信するには、hiddenInput.value = labelをhiddenInput.value = ""に変更します

動作するjsFiddleの例： plain javascript および jQuery

83
Stephan Muller

私が使用するソリューションは次のとおりです。

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

次に、次のようなJavaScriptを使用して、サーバーに送信される値にアクセスします。

var shownVal = document.getElementById("answer").value;
var value2send = document.querySelector("#answers option[value='"+shownVal+"']").dataset.value;


それが役に立てば幸い。

29
Hezbullah Shah

検索用のボタンをクリックすると、ループなしで検索できます。
必要な値（idなど）を持つ属性をオプションに追加し、特定の属性を検索します。

$('#search_wrapper button').on('click', function(){
console.log($('option[value="'+ 
$('#autocomplete_input').val() +'"]').data('value'));
})
1
Gal Albalak