Як у jQuery розкрити Autocomplete натиснувши кнопку

Фреймворк jQuery має у своєму арсеналі компонент Autocomplete. Він відображає підказки (варіанти введення) безпосередньо під полем введення тексту під час його набору. Аналог автокомпліту як у пошукових системах Google або Яндекс.

У одному з проєктів виникла задача відобразити повний список доступних варіантів вибору при кліку на кнопку.

Пропоную детальніше розглянути розв’язання цієї задачі. І перше, що нам потрібно зробити — це підключити всі необхідні скрипти та бібліотеки:

<link rel="stylesheet" href="../bower_components/jquery-ui/themes/base/all.css">
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.min.js"></script>

Описане вище слід розмістити між тегами «head». За бажанням, js-скрипт можна розмістити у футері сайту. І так, не забудьте вказати правильний шлях до ваших скриптів. У моєму випадку вони знаходяться у батьківській директорії.

Далі, вставляємо код між тегами script:

$(document).ready(function() {
	var countries_list = [
'Австрія', 
'Бельгія', 
'Болгарія', 
'Великобританія', 
'Угорщина', 
'Німеччина', 
'Греція', 
'Данія', 
'Ірландія', 
'Іспанія', 
'Італія', 
'Кіпр', 
'Латвія', 
'Литва', 
'Люксембург', 
'Мальта', 
'Нідерланди', 
'Польща', 
'Португалія', 
'Румунія', 
'Словаччина', 
'Словіння', 
'Фінляндія', 
'Франція', 
'Хорватія', 
'Чехія', 
'Швеція', 
'Естонія'
	];
	
	/** Init */
	$("button").button();
	
	$(".el-countries").autocomplete({
		source: countries_list
	});
	
	$('[data-btn="showListCountries"]').click(function(e){
		e.preventDefault();
		
		$(".el-countries").autocomplete({
			source: countries_list,
			minLength: 0
		});
		$(".el-countries").autocomplete("search", "")[0].focus();
	});
});

Де:
countries_list — масив країн Євросоюзу
Стилизуємо нашу кнопку під jquery ui:

$("button").button();

Ініціалізуємо наш autocomplete:

$(".el-countries").autocomplete({
	source: countries_list
});

Зверніть увагу — autocomplete має клас «.el-countries»
І найважливіша частина коду — це показ autocomplete при кліку на кнопку:

$('[data-btn="showListCountries"]').click(function(e){
	e.preventDefault();
	
	$(".el-countries").autocomplete({
		source: countries_list,
		minLength: 0
	});
	$(".el-countries").autocomplete("search", "")[0].focus();
});

Пошук кнопки у DOM здійснюється по атрибуту «data-btn» зі значенням «showListCountries». Так, це трохи ускладнює пошук у DOM, але виглядає елегантніше ніж «id=btnShowListCountries» (хоча це справа смаку).

У коді вище ми повторно ініціалізуємо наш autocomplete зі старими даними, але додаємо параметр «minLength» рівний нулю — що означає, що autocomplete буде працювати навіть без введеного символу.

Після цього, подію «search» встановлюємо у «нуль» і переносимо курсор для введення у елемент autocomplete, використовуючи функцію «focus()»:

$(".el-countries").autocomplete("search", "")[0].focus();

А наш HTML код виглядатиме так:

<div class="ui-widget">
	<label for="countries">Страны: </label>
	<input id="countries" class="el-countries">
	<button type="button" data-btn="showListCountries">отобразить</button>
</div>

Приклад роботи нашого коду можна знайти тут.