基于其他自动完成输入的 jQuery 自动完成选项

Posted 2023-05-08

【中文标题】基于其他自动完成输入的 jQuery 自动完成选项

【英文标题】：jQuery Autocomplete options based on other Autocomplete input

【发布时间】：2020-05-01 16:30:53

【问题描述】：

我希望用户选择一家公司，然后选择该公司的一名员工。我看到了类似的问题，最相似的是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 ????
      )
) 

我花了几个小时在这上面，但我不知道如何写它。任何帮助，将不胜感激。

【参考方案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: []
  );
);

【参考方案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://***.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>

【讨论】：

谢谢，但我想使用 jQuery Autocomplete 小部件 :)