将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文档中没有提到这种行为.因此我为什么会这样做用".val()"填充输入.