Have typeahead.js output into multiple text boxes

Question

I'm working on an internal web form for my company I was trying to use typehead.js to load a name from a local array. I was able to do this without a problem, however the second part of the task is to place that employee's ID in a second text box when the employee name is selected on the first one. I haven't been able to successfully output the value into the text box. Does anyone know how this can be accomplished?

I can't share the actual code since it's part of an internal application, but basically it looks like your basic typehead.js form.

<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

I've implemented the functionality you are looking for here:

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

The trick to populating the ID field when the name is selected is as follows:

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

Note that whilst:

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

does work, the problem is that it causes the suggestion to be displayed when the employee Id Typeahead input is populated (and vice versa), which I think maybe an issue (this behaviour is not mentioned in the typeahead documentation. Hence why I've used ".val()" to populate the input.