Triggering "selected" event in typeahead.js

Question

I am using typeahead.js vs. 0.9.3 and populating the dataset using local.

I am binding functions to the typeahead:selected and typeahead:autocompleted events so that I can populate some other hidden input fields in the form using information in the selected typeahead datum.

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

I also have some HTML boxes on the page and what I would like to happen is for the information in those boxes to populate the typeahead as well as the hidden input fields. In other words, for the html below, if a user clicks on a .copy-data div, the #customer-typeahead and #customer-name should be populated with the text in the clicked upon .customer-name div and #customer-id should be populated with the text in the clicked upon .customer-id div.

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

I have the majority of this working with the following jquery:

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

When the user clicks on the .copy-data div, the appropriate customer name populates the input text box but not the hidden inputs. I was intending to somehow trigger the typeahead:selected event, which would pass the appropriate datum to the changeTypeahead function but that doesn't seem to be happening.

Is there a way to leverage the native functionality of the typeahead and its dataset this way or must I set the hidden inputs directly?

UPDATE: To clarify, I was imagining that using setQuery would cause typeahead to "fire" on its own, i.e. match the query, determine the appropriate datum from the dataset on its own, and trigger all appropriate events. I'd prefer to not have to recreate the entire datum object external from the typeahead dataset if it can be avoided

Solution

You seem to be forgetting to pass the datum to your selected trigger as the second parameter. Try something like:

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

See the documentation for jQuery.trigger

Comments

[rusty1042]

I clarified the question to focus it on what I am trying to do more exactly but I will definitely try this as a fallback option. Any ideas with respect to the update?

[Eero]

You could try to send a keypress (or maybe submit) event to the typeahead, in the hopes of triggering the autocomplete callback. But there seems to be no guarantee that your .copy-data div's content agrees with the typeahead data, or that the typeahead search would find the right match based only on name, if you don't give it the ID. Why not just call your own changeTypeahead function directly?

[rusty1042]

That's exactly what I tried. keypress did not trigger the autocomplete callback. I wanted to avoid calling changeTypeahead because in my actual situation, there's much more information in each datum and I wanted to avoid having to include all of that in the .copy-data div's content if possible and also having to bloat all of those js functions. It ended up being necessary - thanks for the help