javascript 在 typeahead.js 中触发“selected”事件

Triggering "selected" event in typeahead.js

提问by rusty1042

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

我正在使用 typeahead.js 与 0.9.3 并填充datasetusing local。

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

我将函数绑定到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>

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-datadiv, the #customer-typeaheadand #customer-nameshould be populated with the text in the clicked upon .customer-namedivand #customer-idshould be populated with the text in the clicked upon .customer-iddiv.

我在页面上还有一些 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>

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

我有大部分使用以下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-datadiv, the appropriate customer namepopulates the input text box but not the hidden inputs. I was intending to somehow trigger the typeahead:selectedevent, which would pass the appropriate datumto the changeTypeaheadfunction but that doesn't seem to be happening.

当用户点击 时.copy-datadiv，适当的customer name填充输入文本框而不是隐藏的输入。我打算以某种方式触发该typeahead:selected事件，该事件会将适当的传递datum给该changeTypeahead函数，但这似乎没有发生。

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?

有没有办法以这种方式利用 typeahead 及其数据集的本机功能，或者我必须直接设置隐藏输入？

UPDATE: To clarify, I was imagining that using setQuerywould 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

更新：澄清一下，我想象 usingsetQuery会导致 typeahead 自行“触发”，即匹配查询，自行从数据集中确定适当的数据，并触发所有适当的事件。如果可以避免的话，我宁愿不必从 typeahead 数据集外部重新创建整个数据对象

回答by Eero

You seem to be forgetting to pass the datumto your selectedtrigger as the second parameter. Try something like:

您似乎忘记将 传递datum给selected触发器作为第二个参数。尝试类似：

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

See the documentation for jQuery.trigger

请参阅jQuery.trigger 的文档