基於其他自動完成輸入的 jQuery 自動完成選項

Question

我希望用戶選擇一家公司，然后選擇該公司的員工。 我看到了類似的問題，最相似的是這個，但我希望兩個輸入都是自動完成的。

我有以下代碼：

<div class="ui-widget">
   <label>Company</label>
   <input type="text" id="company">
   <label>Employee</label>
   <input type="text" id="employee">
</div>

$(function() {

    var sources = {
        "Company ABC": [ "Employee 1", "Employee 2", "Employee 3" ],
        "Company CDE": [ "Employee 4", "Employee 5", "Employee 6" ],
        "Company EFG": [ "Employee 7", "Employee 8", "Employee 9" ],
        "Company GHI": [ "Employee 10", "Employee 11", "Employee 12" ]
    }

      $("#company").autocomplete({
        source: Object.keys(sources)
      });

      $("#employee").autocomplete({
        source: object values from selected object key ????
      })
}) 

我花了幾個小時在這上面，我不知道如何寫它。 任何幫助，將不勝感激。

Answer 1

我在第一次輸入時使用了更改事件來在員工輸入上設置新源。

 $(function() { var sources = { "Company ABC": ["Employee 1", "Employee 2", "Employee 3"], "Company CDE": ["Employee 4", "Employee 5", "Employee 6"], "Company EFG": ["Employee 7", "Employee 8", "Employee 9"], "Company GHI": ["Employee 10", "Employee 11", "Employee 12"] }; $("#company").autocomplete({ source: Object.keys(sources), change: event => { $("#employee").autocomplete("option", { source: sources[event.currentTarget.value] }); } }); $("#employee").autocomplete({ source: [] }); });

Answer 2

我將輸入與datalist一起使用，但您可以輕松地將其更改為選擇框。 我還在代碼中添加了注釋。

 // every company got it's array of workers const ABC = [ "Employee 1", "Employee 2", "Employee 3" ]; const DEF = [ "Employee 4", "Employee 5", "Employee 6" ]; const GHI = [ "Employee 7", "Employee 8", "Employee 9" ]; const JKL = [ "Employee 10", "Employee 11", "Employee 12" ]; function showWorkers(options) { // this will generate the proper workers // taken from here: https://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array/9895164 const select = document.querySelector('#workers'); for(var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement('option'); el.textContent = opt; el.value = opt; select.appendChild(el); } }; // this will insert the proper workers on the select box document.querySelector('#company-choice').addEventListener('input', function() { document.querySelector('#workers').innerHTML =''; // clear previous options var company = this.value; if (company === 'ABC') { showWorkers(ABC) } else if (company === 'DEF') { showWorkers(DEF) } else if (company === 'GHI') { showWorkers(GHI) } else if (company === 'JKL') { showWorkers(JKL) } else {return false} });

 <label for="company-choice">Choose Company</label> <input list="company-name" id="company-choice" name="company-choice" /> <datalist id="company-name"> <option value="ABC"> <option value="DEF"> <option value="GHI"> <option value="JKL"> </datalist> <select id="workers"></select>