在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, ie 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

Answer 1

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