typeahead.js에서 "selected"이벤트 트리거링

Question

typeahead.js와 0.9.3을 사용하고 local을 사용하여 dataset을 채우고 있습니다.

이벤트를 typeahead:selected 및 typeahead:autocompleted 이벤트에 바인딩하여 선택한 입력 정보의 정보를 사용하여 다른 숨겨진 입력 필드를 채울 수 있습니다.

<form id="customer-form" action="/customer-form" method="post"> 
    <input type="text" name="customer-typeahead" placeholder="Customer name" id="customer-typeahead"/> 

    <input type="hidden" name="customer-id" id="customer-id"/> 
    <input type="hidden" name="customer-name" id="customer-name"/> 
</form> 

는 또한 페이지에 일부 HTML 상자를 가지고 내가이 일하고자하는 것은 선행 입력을 채우는 그 상자에 정보와 숨겨진 입력 필드입니다. 즉, 아래의 HTML를 들어, 사용자는 .copy-datadiv에서 클릭하는 #customer-typeahead 및 #customer-name은 .customer-namediv 및 #customer-id가 .customer-iddiv에 클릭의 텍스트로 채워 져야합니다시 클릭의 텍스트로 채워해야합니다.

<div class="copy-data"> 
    <div class="buffer-div"> 
     <div class="customer-id">1</div> 
     <div class="customer-name">Andrew</div> 
    </div> 
</div> 
<div class="copy-data"> 
    <div class="buffer-div"> 
     <p class="customer-id">2</p> 
     <p class="customer-name">Bryan</p> 
    </div> 
</div> 
<div class="copy-data"> 
    <div class="buffer-div"> 
     <div class="customer-id">3</div> 
     <div class="customer-name">Cathy</div> 
    </div> 
</div> 

나는 다음과 같은 jQuery로 작업이 대부분이 : 사용자가 .copy-datadiv를 클릭하면

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="../js/typeahead.min.js" type="text/javascript"></script> 
<script src="../js/hogan.js" type="text/javascript"></script> 
<script> 

$(document).ready(function() { 

    var typeahead_template = [ 
      '<div style="width: 190px; float:left;">{{value}}</div>', 
      '<div style="float:right;">{{id}}</div>' 
      ].join('') 

    function changeTypeahead(obj, datum) { 
      $('input#customer-id').val(datum.id); 
      $('input#customer-name').val(datum.value); 
    }; 

    $('#customer-typeahead').typeahead({ 
     local: [{"value": "Andrew", "id": "1"}, {"value": "Bryan", "id": "2"}, {"value": "Cathy", "id": "3"} ], 
     limit: 5, 
     template: typeahead_template, 
     engine: Hogan 
    }).bind('typeahead:selected', function(obj, datum) { 
     changeTypeahead(obj, datum); 
    }).bind('typeahead:autocompleted', function(obj, datum) { 
     changeTypeahead(obj, datum); 
    }); 

    $(".copy-data").click(function(){ 
     id = $(this).find(".customer-id").text(); 
     name = $(this).find(".customer-name").text(); 

     $("#customer-typeahead").typeahead('setQuery', name) 
     $("#customer-typeahead").trigger('selected'); 
    }); 
}); 

</script> 

을 적절한 customer name 입력 텍스트 상자가 아닌 숨겨진 입력을 채 웁니다. 어떻게 든 typeahead:selected 이벤트를 트리거하려고했는데, 이는 datum을 changeTypeahead 함수로 전달하지만 실제로 발생하지는 않습니다.

이 방식으로 네이티브 기능과 해당 데이터 세트를 활용하는 방법이 있습니까? 아니면 숨겨진 입력을 직접 설정해야합니까?

업데이트 : 분명히하기 위해 setQuery을 사용하면 선입관이 자체적으로 '실행'되도록 할 수 있습니다. 즉, 검색어와 일치하고, 데이터 세트에서 적절한 데이터를 결정하고, 모든 적절한 이벤트를 트리거합니다. 나는 그것을 피할 수있는 경우 typeahead 데이터 집합 외부에서 전체 데이텀 개체를 다시 만들 필요가 없습니다.

Answer 1

두 번째 매개 변수로 selected 트리거에 datum을 전달하는 것을 잊어 가고있는 것 같습니다.

$("#customer-typeahead").trigger('selected', {"id": id, "value": value}); 

내가 좀 더 정확하게하려고 노력하고 무엇에 초점을 질문을 명확하지만 확실히 대체 옵션으로 이것을 시도 할 것이다