jQuery 基于其他自动完成输入的自动完成选项
jQuery Autocomplete options based on other Autocomplete input
我想要一个用户select一家公司,然后是这家公司的一名员工。我看到了类似的问题,最相似的是 但我希望两个输入都是自动完成的。
我有以下代码:
<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 ????
})
})
我花了好几个小时写这个,但我不知道怎么写。任何帮助,将不胜感激。
我在 datalist 中使用输入,但您可以轻松地将其更改为 select 框。我也在代码里面做了注释。
// 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:
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>
我在第一个输入上使用了更改事件来为员工输入设置一个新的源。
$(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: []
});
});
我想要一个用户select一家公司,然后是这家公司的一名员工。我看到了类似的问题,最相似的是
我有以下代码:
<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 ????
})
})
我花了好几个小时写这个,但我不知道怎么写。任何帮助,将不胜感激。
我在 datalist 中使用输入,但您可以轻松地将其更改为 select 框。我也在代码里面做了注释。
// 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:
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>
我在第一个输入上使用了更改事件来为员工输入设置一个新的源。
$(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: []
});
});