84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
const AutoSuggestFields = () => {
|
|
const [cluster, setCluster] = useState('');
|
|
const [subdivision, setSubdivision] = useState('');
|
|
const [career, setCareer] = useState('');
|
|
|
|
const clusters = ['Cluster A', 'Cluster B', 'Cluster C'];
|
|
const subdivisions = {
|
|
'Cluster A': ['Subdivision A1', 'Subdivision A2'],
|
|
'Cluster B': ['Subdivision B1', 'Subdivision B2'],
|
|
'Cluster C': ['Subdivision C1', 'Subdivision C2'],
|
|
};
|
|
const careers = {
|
|
'Subdivision A1': ['Career A1-1', 'Career A1-2'],
|
|
'Subdivision B1': ['Career B1-1', 'Career B1-2'],
|
|
'Subdivision C1': ['Career C1-1', 'Career C1-2'],
|
|
};
|
|
|
|
const handleClusterChange = (e) => {
|
|
setCluster(e.target.value);
|
|
setSubdivision('');
|
|
setCareer('');
|
|
};
|
|
|
|
const handleSubdivisionChange = (e) => {
|
|
setSubdivision(e.target.value);
|
|
setCareer('');
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<label>
|
|
Cluster:
|
|
<input
|
|
type="text"
|
|
list="cluster-options"
|
|
value={cluster}
|
|
onChange={handleClusterChange}
|
|
/>
|
|
<datalist id="cluster-options">
|
|
{clusters.map((c) => (
|
|
<option key={c} value={c} />
|
|
))}
|
|
</datalist>
|
|
</label>
|
|
|
|
<label>
|
|
Subdivision:
|
|
<input
|
|
type="text"
|
|
list="subdivision-options"
|
|
value={subdivision}
|
|
onChange={handleSubdivisionChange}
|
|
disabled={!cluster}
|
|
/>
|
|
<datalist id="subdivision-options">
|
|
{(subdivisions[cluster] || []).map((s) => (
|
|
<option key={s} value={s} />
|
|
))}
|
|
</datalist>
|
|
</label>
|
|
|
|
<label>
|
|
Career:
|
|
<select
|
|
value={career}
|
|
onChange={(e) => setCareer(e.target.value)}
|
|
disabled={!subdivision}
|
|
>
|
|
<option value="">Select a career</option>
|
|
{(careers[subdivision] || []).map((c) => (
|
|
<option key={c} value={c}>
|
|
{c}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AutoSuggestFields;
|