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

问题描述

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

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 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 accomplished?

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

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've implemented the functionality you are looking for here:

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

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

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

请注意，虽然:

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

确实有效，问题在于，当填充员工Id Typeahead输入(反之亦然)时，它会导致显示建议(反之亦然)，我认为这可能是一个问题( typeahead文档.因此，为什么要使用" .val ()"来填充输入.

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.

这篇关于将typeahead.js输出到多个文本框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！