JQuery автозаполнение изменить источник динамически без, если еще - PullRequest
Новая
       30

JQuery автозаполнение изменить источник динамически без, если еще

0 голосов
/ 24 января 2019

Входы:"Номер комнаты", "Имя".

Автозаполнение источника второго входа изменяется в зависимости от значения первого входа.

Как я могупреобразовать мои длинные условия 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>

1 Ответ

0 голосов
/ 24 января 2019

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