jQuery Autocomplete options based on other Autocomplete input

Question

I want a user to select a company and then an employee from this company. I saw similar questions, the most similar is this but I want both inputs to be autocomplete.

I have following code:

<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 ????
      })
})

I spent hours on this and I have no idea how to write it. Any help would be appreciated.

score 1 · Accepted Answer · answered Jan 15 '20 at 20:27

I have used used change event on first input to set a new source on the employee input.

$(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: []
  });
});

score 0 · Answer 2 · answered Jan 14 '20 at 22:29

I use input with datalist but you can change it to select box easily. I also put notes inside the code.

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

Thank you, but I would like to use jQuery Autocomplete widget :) — maja, Jan 14 '20 at 22:46

jQuery Autocomplete options based on other Autocomplete input

2 Answers2