jQuery自动完成动态更改源，没有if else

Question

输入：“房间号”、“名称”。

第二个输入的自动完成源根据第一个输入的值而改变。

如何将我的长“if-else”条件转换为简短而简单的自动脚本？

我试图这样做。警报工作正常并返回适当的变量。但它不适用于更改自动完成源。

谢谢！

<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>

Answer 1

执行此操作的简单方法是将房间数组放入一个对象，该对象由您希望 #First 自动完成具有的值作为键。

另请注意，从自动完成中选择一个选项不会引发 change 或 blur 事件；您需要使用配置对象的select 属性来处理选择事件。试试这个：

var rooms = {
  "default": ["Default"],
  "first": ["Glory", "Dorris", "Rebecca"],
  "second": ["Will", "Henry", "Louie"],
  "third": ["Kraig", "Eddie", "Frank"],
  "fourth": ["David", "Rex", "Jordan"],
  "fifth": ["Ben", "Janet", "Cassaundra"]
}

$("#Second").autocomplete({
  source: ["Default"]
})

$("#First").autocomplete({
  source: [
    "first",
    "second",
    "third",
    "fourth",
    "fifth"
  ],
  select: function(e, ui) {
    var room = ui.item.value;
    if (!rooms.hasOwnProperty(room))
      room = 'default';

    $("#Second").autocomplete('option', 'source', rooms[room])
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input id="First" Placeholder="Room number" />
<input id="Second" Placeholder="Name" />