[javascript] 데이터 목록 레이블을 표시하지만 실제 값을 제출합니다.

Program / 글쓴이

현재 HTML5 <datalist>요소는 대부분의 주요 브라우저 (Safari 제외)에서 지원되며 입력에 제안을 추가하는 흥미로운 방법으로 보입니다.

그러나 value속성 의 구현과 .NET Framework 의 내부 텍스트 간에 약간의 불일치가있는 것 같습니다 <option>. 예를 들면 :

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

이것은 다른 브라우저에서 다르게 처리됩니다.

Chrome 및 Opera :
Chrome / Opera의 데이터 목록

FireFox 및 IE 11 :
FireFox의 데이터 목록

하나를 선택한 후 입력은 내부 텍스트가 아닌 값으로 채워집니다. 사용자가 드롭 다운과 입력에서 텍스트 ( “답변”) 만 볼 수 있기를 원하지만 42, 제출할 때 값 을 전달합니다 select.

모든 브라우저가 <option>s 의 레이블 (내부 텍스트)을 표시하는 드롭 다운 목록을 가지 value면서 양식이 제출 될 때 속성을 보내도록하려면 어떻게해야합니까?

답변

참고 datalistA와 동일하지 않습니다 select. 사용자가 목록에없는 사용자 지정 값을 입력 할 수 있으며, 먼저 정의하지 않고는 이러한 입력에 대한 대체 값을 가져올 수 없습니다.

사용자 입력을 처리하는 가능한 방법은 입력 된 값을있는 그대로 제출하거나 빈 값을 제출하거나 제출을 방지하는 것입니다. 이 답변은 처음 두 가지 옵션 만 처리합니다.

사용자 입력을 완전히 허용하지 않으려면 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하나 이상의를 사용하여 동일한 페이지에 여러를 가질 수 datalist있습니다.

모든 사용자 입력은있는 그대로 제출됩니다. 사용자 입력이 데이터 목록에 없을 때 빈 값을 제출하려면 다음 hiddenInput.value = inputValue으로 변경하십시오 .hiddenInput.value = ""

작업 jsFiddle 예제 : 일반 자바 스크립트 및 jQuery

답변

내가 사용하는 솔루션은 다음과 같습니다.

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

도움이 되었기를 바랍니다.

답변

나는 이것이 조금 늦을 수도 있음을 알고 있지만 이것을 우연히 발견하고 여러 개의 동일한 값을 사용하지만 다른 키로 상황을 처리하는 방법을 궁금해했습니다 (bigbearzhu의 의견에 따라).

그래서 Stephan Muller의 대답을 약간 수정했습니다.

고유하지 않은 값이있는 데이터 목록 : 

<input list="answers" name="answer" id="answerInput">
<datalist id="answers">
  <option value="42">The answer</option>
  <option value="43">The answer</option>
  <option value="44">Another Answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

사용자는 옵션, 브라우저을 대체 선택하면 input.value와 value의 datalist대신의 옵션을 innerText.

다음 코드는 optionwith that 을 확인 value하고 숨겨진 필드로 푸시 input.value한 다음을 innerText.

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

    if (options.length > 0) {
      hiddenInput.value = input.value;
      input.value = options[0].innerText;
      }

});

결과적으로 사용자는 옵션의 innerText내용을 볼 수 있지만 option.value양식 제출시 고유 ID를 사용할 수 있습니다.
데모 jsFiddle

답변

검색 버튼을 클릭하면 루프없이 찾을 수 있습니다.
필요한 값 (예 :)이있는 속성을 옵션에 추가 id하고 구체적으로 검색하십시오.

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

답변

PHP를 사용하여이 작업을 수행하는 아주 간단한 방법을 찾았습니다. 여러분, 그냥 이렇게 사용하세요

<input list="customers" name="customer_id" required class="form-control" placeholder="Customer Name">
            <datalist id="customers">
                <?php
    $querySnamex = "SELECT * FROM `customer` WHERE fname!='' AND lname!='' order by customer_id ASC";
    $resultSnamex = mysqli_query($con,$querySnamex) or die(mysql_error());

                while ($row_this = mysqli_fetch_array($resultSnamex)) {
                    echo '<option data-value="'.$row_this['customer_id'].'">'.$row_this['fname'].' '.$row_this['lname'].'</option>
                    <input type="hidden" name="customer_id_real" value="'.$row_this['customer_id'].'" id="answerInput-hidden">';
                }

                 ?>
            </datalist>

위의 코드를 사용하면 선택한 옵션의 ID도 양식에 전달할 수 있습니다.

답변