有typeahead.js輸出到多個文本框

Question

我正在爲我的公司的內部Web表單工作我試圖使用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 documentation提及。因此，我爲什麼使用「.val（）」填充輸入。

Answer 2

您可以使用預輸入事件預輸入：即使選擇，當選擇任何選項，你可以選擇什麼樣的價值將被觸發。使用這些信息，您可以爲另一個文本框設置值。

Answer 3

我知道這太舊了，但它可能會幫助其他人。一直試圖做類似的事情，接受這一個是爲醫生;用戶輸入醫生姓名，並在他/她從建議中選擇時，用該醫生信息填充剩餘的字段。以下代碼如下：

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