javascript - 将 typeahead.js 输出到多个文本框中

Question

我正在为我的公司开发一个内部 Web 表单，我试图使用 typehead.js 从本地数组加载名称。我能够毫无问题地执行此操作，但是任务的第二部分是当在第一个文本框中选择员工姓名时，将该员工的 ID 放入第二个文本框中。我无法成功地将值输出到文本框中。有谁知道如何实现这一点？

我无法分享实际的代码，因为它是内部应用程序的一部分，但基本上它看起来像您的基本 typehead.js 表单。

<form>
     <input type="text" class="typeahead" id="employee_name"/>
     <input type="text" class="typeahead" id="employee_id"/>
</form>
<script>
    employees.initialize(); //initialize the employee search

// instantiate the typeahead UI
$('#employee_name.typeahead').typeahead({
    highlight: true
},
{
    name: 'name',
    displayKey: 'name',
    source: employees.ttAdapter()
});

    var employees = new Bloodhound({ //List of employees
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name);     },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [
    { name: 'Employee 1', id: '12345' },
    { name: 'Employee 2', id: '54321' }
    ]
    });
</script>

Answer 1

我已经实现了您正在寻找的功能:

http://jsfiddle.net/Fresh/kLLCy/

选择名称时填充 ID 字段的技巧如下:

var employeeNameItemSelectedHandler = 
 function (eventObject, suggestionObject, suggestionDataset) {
    // The following should work but it has an issue
    //employeeIdTypeahead.typeahead('val', suggestionObject.id);
    employeeIdTypeahead.val(suggestionObject.id);
};

employeeNameTypeahead.on('typeahead:selected', employeeNameItemSelectedHandler);

请注意，同时:

employeeIdTypeahead.typeahead('val', suggestionObject.id);

确实有效，问题是它会导致在填充员工 ID Typeahead 输入时显示建议(反之亦然)，我认为这可能是一个问题( typeahead documentation 中没有提到此行为。因此为什么我使用“.val()”来填充输入。