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

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

---

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

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

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

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

Chrome 및 Opera :

FireFox 및 IE 11 :

하나를 선택한 후 입력은 내부 텍스트가 아닌 값으로 채워집니다. 사용자가 드롭 다운과 입력에서 텍스트 ( "답변") 만 볼 수 있기를 바라지 만, 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 = label으로 변경하십시오 .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;

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

---

검색 버튼을 클릭하면 루프없이 찾을 수 있습니다.
필요한 값 (예 :)이있는 속성을 옵션에 추가 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도 양식에 전달할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value