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 s

Answer 1

You can use typeahead event typeahead:selected even, which will be triggered when any option is selected and you can get what value is selected. Using this information you can set value for another text box.

Answer 2

I know this is too old but it might help someone else. Been trying to do a similar thing, accept this one is for doctors; where a user types a doctors name and when he/she selects from the suggestions, it populates the rest of the fields with that doctors information. Here is the code below:

var doctors = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'ajax.getDoctors.php?query=%QUERY',
        filter: function (list) {
            // Map the remote source JSON array to a JavaScript array
            return $.map(list, function (doctor) {
                return {
                    value: doctor.Doctors,
                    Code: doctor.DoctorsCode,
                    Category: doctor.Category,
                    DoctorID: doctor.DoctorID,
                    PractiseName: doctor.PractiseName,
                    PractiseAddress: doctor.PractiseAddress
                };
            });
        }
    }   
});

doctors.initialize();

$('#doctors-auto-suggest .typeahead').typeahead(null, {
    name: 'doctors-list',
    displayKey: 'value',
    hint: true,
    highlight: true,
    minLength: 1,
    source: doctors.ttAdapter()
 }).on('typeahead:selected', function (obj, datum) {
    console.log(datum);
    var DoctorsData = new Array();
    DoctorsData = $.parseJSON(JSON.stringify(datum));

    $('#DoctorsName').val(DoctorsData["value"]);
    $('#Code').val(DoctorsData["Code"]);
    $('#DoctorID').val(DoctorsData["DoctorID"]);
    $('#Category').val(DoctorsData["Category"]);
    $('#Practise').val(DoctorsData["PractiseName"]);
    $('#PractiseAddress').val(DoctorsData["PractiseAddress"]);
});

Answer 3

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.