Как в 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();

Инициализируем наш автокомплит:

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

Обратите внимание, autocomplete имеет класс «.el-countries»
Ну и самая главная часть кода, это отображение автокомплита при клике но кнопке:

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

Поиск кнопки в доме осуществляем по атрибуту «data-btn» со значением «showListCountries». Да, это немного затрудняет dom поиск, но выглядит более элегантнее чем «id=btnShowListCountries» (хотя дело вкуса играет не малую роль).

В коде выше, мы повторно инициализируем наш автокомплит с прежними данными. Но добавив к объекту параметр «minLength» равный нулю. Свидетельствующий о том, что автокомплит будет срабатывать и без какого либо введенного символа.

Поле чего, событие «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>

Пример работы нашего кода, можно найти здесь.