UdnlxPortfolio - Всплывающая подсказка выбора для Input

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