Awesomplete 세트 레이블 텍스트 필드 및 숨겨진 필드 값

Question

간편한 텍스트 필드 자동 완성을 위해 Awesomplete를 사용하고 있습니다. 나는 라벨과 값을 가진 배열을 가지고 있는데, 무언가가 선택되면 텍스트와 광고 값 (이 경우 ID)을 숨겨진 필드로 완성하지 않을 것입니다.

docs

사람은이 작업을 수행하는 방법을 알아?

코드 예제 :

는 HTML :

이

<input type="text" id="title" name="title" class="form-control" placeholder="Titel" required /> 
<input type="hidden" id="id" name="id"> 

PHP :

<?php 
$titles = array(); 
    foreach ($data as $title){ 
      $titles[] = array(
       "label" => $title->title, 
       "value" => $title->id, 
      ); 

    } 
?> 

JS 당신은 awesomplete-selectcomplete 이벤트를 사용할 수 있습니다

<script type="text/javascript"> 
    //array with all titles and id from a php array 
    var jArray = <?php echo json_encode($titles); ?>; 

    var input = document.getElementById("title"); 

    var input2 = document.getElementById("id"); 

    new Awesomplete(input, { 
     list: jArray 
    }); 



</script> 

Answer 1

이의 발을 설정하는 당신의 숨겨진 https://leaverou.github.io/awesomplete/#events이

  window.addEventListener("awesomplete-selectcomplete", function(e){ 
       input2.value = e.text.value; 
      }, false); 

이동을 수행하여 입력 이벤트에 대한 자세한 내용을 알고 있지만, 그것을 인용, "콜백은 선택된 제안을 포함하는 텍스트 속성 객체를 전달됩니다. "

Answer 2

는이 작업을 수행 :

<input id="myinput-hidden" name="lang" type="hidden" /> 
<input id="myinput" /> 

var hidden = $("#myinput-hidden"); 

new Awesomplete("#myinput", { 
    list: [["Ada", 1], ["Java", 2], ["JavaScript", 3], ["Brainfuck", 4], ["LOLCODE", 5], ["Node.js", 6], ["Ruby on Rails", 7]], 

    // the only function you need to override: 
    replace: function(suggestion) { 
     this.input.value = suggestion.label; // default replace() inserts suggestion.value to input 
     hidden.value = suggestion.value; 
    } 
});