Автозаполнение jQuery динамически меняет источник без 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>

input jquery autocomplete
person Iwww    schedule 24.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Этот простой способ сделать это - поместить массивы комнат в объект, который имеет значение, которое вы ожидаете от автозаполнения #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" />

person Rory McCrossan    schedule 24.01.2019
comment
Спасибо за ответ, но скрипт не работает.. Может я что-то не так сделал. Можешь выложить свой код на jsfiddle, если тебе не сложно? - person Iwww; 24.01.2019
comment
Проблема в том, что вы подключаетесь к событиям, которые не будут вызываться. Я отредактировал ответ, чтобы дать вам полный пример - person Rory McCrossan; 24.01.2019