Have typeahead.js output into multiple text boxes

http://stackoverflow.com/questions/21586443/have-typeahead-js-output-into-multiple-text-boxes

by bizamajig

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
<form>
    <label for="employee_name">Name</label>
    <input type="text" class="typeahead" id="employee_name" /><br/>
    <label for="employee_id">ID</label>
    <input type="text" class="typeahead" id="employee_id" /><br/>
</form>

CSS

/* custom font! */

/* ------------ */
 @font-face {
    font-family: Prociono;
    src: url(../font/Prociono-Regular-webfont.ttf);
}
/* scaffolding */

/* ----------- */
 html {
    overflow-y: scroll;
    *overflow-x: hidden;
}
.container {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.tt-dropdown-menu, .gist {
    text-align: left;
}
/* base styles */

/* ----------- */
 html {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    color: #333;
}
.title, .example-name {
    font-family: Prociono;
}
p {
    margin: 0 0 10px 0;
}
/* site theme */

/* ---------- */
 .title {
    margin: 20px 0 0 0;
    font-size: 64px;
}
.example {
    padding: 30px 0;
}
.example-name {
    margin: 20px 0;
    font-size: 32px;
}
.demo {
    position: relative;
    *z-index: 1;
    margin: 50px 0;
}
.typeahead, .tt-query, .tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}
.typeahead {
    background-color: #fff;
}
.typeahead:focus {
    border: 2px solid #0097cf;
}
.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
    color: #999
}
.tt-dropdown-menu {
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}
.tt-suggestion.tt-cursor {
    color:...

JavaScript

var employeeData = [{
    name: 'Employee 1',
    id: '12345'
}, {
    name: 'Employee 2',
    id: '54321'
}];

var names = new Bloodhound({
    datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: employeeData
});

var ids = new Bloodhound({
    datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.id);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: employeeData
});

// Initialise Bloodhound suggestion engines for each input
names.initialize();
ids.initialize();

// Make the code less verbose by creating variables for the following
var employeeNameTypeahead = $('#employee_name.typeahead');
var employeeIdTypeahead = $('#employee_id.typeahead');

// Initialise typeahead for the employee name
employeeNameTypeahead.typeahead({
    highlight: true
}, {
    name: 'name',
    displayKey: 'name',
    source: names.ttAdapter()
});

// Initialise typeahead for the employee name
employeeIdTypeahead.typeahead({
    highlight: true
}, {
    name: 'id',
    displayKey: 'id',
    source: ids.ttAdapter()
});

// Set-up event handlers so that the ID is auto-populated in the id typeahead input when the name is
// selected an vice versa

var employeeNameItemSelectedHandler = function (eventObject, suggestionObject, suggestionDataset) {
    /* According to the documentation the following should work https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#jquerytypeaheadval-val.
    However it causes the suggestion to appear which is not wanted */
    //employeeIdTypeahead.typeahead('val', suggestionObject.id);
    employeeIdTypeahead.val(suggestionObject.id);
};

var employeeIdItemSelectedHandler = function (eventObject, suggestionObject, suggestionDataset) {
    /* See comment in previous method */
    //employeeNameTypeahead.typeahead('val', suggestionObject.name);
   ...