jQuery Параметры автозаполнения на основе других данных автозаполнения

Question

Я хочу, чтобы пользователь выбрал компанию, а затем сотрудника этой компании. Я видел похожие вопросы, наиболее похожими являются this , но я хочу, чтобы оба ввода были автозаполнены.

У меня есть следующий код:

<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 , но вы можете изменить его, чтобы легко выбрать поле. Я также помещаю заметки в код.

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