JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<fieldset class="job">
<label for="job">What job do you have?</label>
<!--------id below controls auto select--------->
<select id="job" name="job">
<option value="no_job_selected">no_job_selected</option>
<option value="job_1">job_1</option>
<option value="job_2">job_2</option>
<option value="job_3">job_3</option>
</select>
</fieldset>
<fieldset class="country">
<label for="country">Which country do you live in?</label>
<input type="text" id="country" name="country" />
<ul id="country_results"></ul>
</fieldset>
</form>
JavaScript
var selected_value = '',
country_data = [],
$suggestion_list = $('#country_results');
$("#job").change(function () {
selected_value = $("#job option:selected").val();
return selected_value;
}).change();
if (selected_value == "job_1") {
country_data = [{
"country_id": 1,
"country": "Luxembourg",
"local_wage": "407",
"wage": "489",
"exchange": "0.98"
}, {
"country_id": 2,
"country": "Norway",
"local_wage": "3200",
"wage": "378",
"exchange": "9.57"
}, {
"country_id": 3,
"country": "Austria",
"local_wage": "290",
"wage": "337",
"exchange": "0.87"
}];
} else if (selected_value == "job_2") {
country_data = [{
"country_id": 1,
"country": "Luxembourg",
"local_wage": "874",
"wage": "654",
"exchange": "0.24"
}, {
"country_id": 2,
"country": "Norway",
"local_wage": "741",
"wage": "365",
"exchange": "4.77"
}, {
"country_id": 3,
"country": "Austria",
"local_wage": "854",
"wage": "634",
"exchange": "0.43"
}];
} else if (selected_value == "job_3") {
country_data = [{
"country_id": 1,
"country": "Luxembourg",
"local_wage": "854",
"wage": "985",
"exchange": "0.25"
}, {
"country_id": 2,
"country": "Norway",
"local_wage": "645",
"wage": "874",
"exchange": "5.55"
}, {
"country_id": 3,
"country": "Austria",
"local_wage": "201",
"wage": "256",
"exchange": "0.78"
}];
}
/* AUTO SUGGEST */
$('#country').bind('keyup focus', function (e) {
'use strict';
if (e.which == 13) return false;
var search_str = $(this).val();
$suggestion_list.empty();
var exactMatch = false;
$('#wage').addClass("disabled");
if (search_str.length >= 2) {
...