Question

我正在为我的公司制作内部网络表单我试图使用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>

Answer 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（）”来填充输入。

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

Answer 3

您可以使用typeahead事件typeahead：selected even，当选择任何选项时将触发该事件，您可以获得选择的值。使用此信息，您可以为另一个文本框设置值。

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

3 个答案: