I'm working on an internal web form for my pany 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 acplished?

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>

I'm working on an internal web form for my pany 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 acplished?

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>

• javascript
• jquery
• bootstrap-typeahead
• typeahead
• typeahead.js

3 Answers 3

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

http://jsfiddle/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.

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"]);
});

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.