<input id="First" Placeholder="Room number" />

<input id="Second" Placeholder="Name" />


<script>
var first_input = [
"first",
"second",
"third",
"fourth",
"fifth"
];

$("#First").autocomplete({
source: first_input
})
</script>


<script>
var default_room = [
"Default"
];

var first_room = [
"Glory",
"Dorris",
"Rebecca"
];

var second_room = [
"Will",
"Henry",
"Louie"
];

var third_room = [
"Kraig",
"Eddie",
"Frank"
];

var fourth_room = [
"David",
"Rex",
"Jordan"
];

var fifth_room = [
"Ben",
"Janet",
"Cassaundra"
];


$("#Second").autocomplete({
source: default_room
})


$("#First").on("change blur", function() {

if (this.value == "first") {
$("#Second").autocomplete('option', 'source', first_room)
} else if (this.value == "second") {
$("#Second").autocomplete('option', 'source', second_room)
} else if (this.value == "third") {
$("#Second").autocomplete('option', 'source', third_room)
} else if (this.value == "fourth") {
$("#Second").autocomplete('option', 'source', fourth_room)
} else if (this.value == "fifth") {
$("#Second").autocomplete('option', 'source', fifth_room)
} else {
$("#Second").autocomplete('option', 'source', default_room)
}

/*
var src_change = this.value + "_room";
alert (src_change);
$("#Second").autocomplete('option', 'source', src_change);
*/

})

</script>