将 typeahead.js 输出到多个文本框中答案

【问题标题】：Have typeahead.js output into multiple text boxes将 typeahead.js 输出到多个文本框中
【发布时间】：2014-02-05 19:17:05
【问题描述】：

我正在为我的公司制作一个内部网络表单，我试图使用 typehead.js 从本地数组中加载名称。我能够毫无问题地做到这一点，但是任务的第二部分是当在第一个文本框中选择员工姓名时，将该员工的 ID 放在第二个文本框中。我无法成功地将值输出到文本框中。有谁知道如何做到这一点？

我无法分享实际代码，因为它是内部应用程序的一部分，但基本上它看起来像您的基本 typehead.js 表单。

<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

【解决方案1】：

我已经实现了您在此处寻找的功能：

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

选择名称时填充 ID 字段的技巧如下：

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

请注意，虽然：

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

确实有效，问题是它会导致在填充员工 Id Typeahead 输入时显示建议（反之亦然），我认为这可能是一个问题（typeahead documentation 中未提及此行为。因此为什么我使用“.val()”来填充输入。

【讨论】：

仅供参考，我还在GitHub 上提出了关于 typeahead('val',...) 行为的问题。开发人员同意当前的行为并不理想。
很高兴我能帮助@RenzoGaspary :)

【解决方案2】：

我知道这太旧了，但它可能对其他人有所帮助。一直在尝试做类似的事情，接受这是给医生的；在用户输入医生姓名的情况下，当他/她从建议中进行选择时，它会使用该医生信息填充其余字段。下面是代码：

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

【讨论】：

我有一个非常相似的设置，使用我的 JSON 请求中的“值”变量作为 displayKey，它是多个字段的组合，但是当我指定 Typeahead 输入框“名称”时应该设置为返回的数据“名称”，它用“值”变量填充它。输入框默认使用“值”的内容而不是我尝试设置的内容是否有原因？

【解决方案3】：

你甚至可以使用typeahead事件typeahead:selected，当任何一个选项被选中时都会触发，你可以得到被选中的值。使用此信息，您可以为另一个文本框设置值。

【讨论】：