Если вдруг понадобится сделать всплывающую подсказку выбора для Input, то можно воспользоваться библиотекой autoComplete.js.
Ниже приведу пример как я это сделал для сайта покупки билетов на автобусы.
Для начала добавляем в наш проект эту библиотеку. Файл CSS кладем в папку для CSS и подключаем. Файл JS кладем в папку для JS и так же подключаем.
CSS размещаем в head
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="/bus_wp/wp-content/themes/tc-olimp/assets/css/autoComplete.css">
<?php wp_head(); ?>
</head>
JS размещаем в разделе скриптов, плюс к JS пишем небольшой скрипт обработчик который будет работать с нашим input'ом.
Пример
<script src="/bus_wp/wp-content/themes/tc-olimp/assets/js/autoComplete.min.js"></script>
<script>
const autoCompleteJSfrom = new autoComplete({
selector: "#from",
data: {
src: ["Москва", "Пенза", "Стаханов"]
},
resultItem: {
highlight: true,
}
});
autoCompleteJSfrom.input.addEventListener("selection", function (event) {
const feedback = event.detail;
autoCompleteJSfrom.input.blur();
const selection = feedback.selection.value;
document.querySelector(".selection").innerHTML = selection;
autoCompleteJSfrom.input.value = selection;
//console.log(feedback.selection.value);
});
const autoCompleteJSto = new autoComplete({
selector: "#to",
data: {
src: ["Москва", "Пенза", "Стаханов"]
},
resultItem: {
highlight: true,
}
});
autoCompleteJSto.input.addEventListener("selection", function (event) {
const feedback = event.detail;
autoCompleteJSto.input.blur();
const selection = feedback.selection.value;
document.querySelector(".selection").innerHTML = selection;
autoCompleteJSto.input.value = selection;
//console.log(feedback.selection.value);
});
</script>
Соответственно input'ы в нашей форме должны быть такими.
Пример input
<div class="form-group">
<input type="text" class="form-control fromto selection" id="from" name="from_text" required placeholder="Откуда" autocomplete="off">
</div>
<div class="form-group">
<input type="text" class="form-control fromto selection" id="to" name="to_text" required placeholder="Куда" autocomplete="off">
</div>