javascript - Have typeahead.js output into multiple text boxes - Stack Overflow

admin管理员组

文章数量:1356847

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

Share Improve this question Follow asked Feb 5, 2014 at 19:17 Renzo GasparyRenzo Gaspary 30055 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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.

本文标签： javascriptHave typeaheadjs output into multiple text boxesStack Overflow