How to expand Autocomplete in jQuery by clicking on a button

The jQuery framework includes a component called Autocomplete, which displays suggestions (input options) directly below the text input field as it’s being typed. Similar to how autocomplete works in search engines like Google or Yandex.

In one of the projects, there was a task to display the full list of available options when clicking a button.

Let’s take a closer look at how to implement this. The first thing we need to do is include all the necessary scripts and libraries:

<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>

The above should be placed between thetags. Optionally, you can place the JS script in the site's footer. And don't forget to provide the correct path to your scripts. In my case, they are located in the parent directory.

Next, insert the following code between the script tags:

$(document).ready(function() {
	var countries_list = [
'Austria',
'Belgium',
'Bulgaria',
'United Kingdom',
'Hungary',
'Germany',
'Greece',
'Denmark',
'Ireland',
'Spain',
'Italy',
'Cyprus',
'Latvia',
'Lithuania',
'Luxembourg',
'Malta',
'Netherlands',
'Poland',
'Portugal',
'Romania',
'Slovakia',
'Slovenia',
'Finland',
'France',
'Croatia',
'Czech Republic',
'Sweden',
'Estonia'
	];
	
	/** 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();
	});
});

Where:
countries_list — an array of EU countries
We style the button using jQuery UI:

$("button").button();

We initialize our autocomplete:

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

Note that the autocomplete input has the class “.el-countries”
And the most important part of the code is displaying the autocomplete list when the button is clicked:

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

We search for the button in the DOM using the attribute “data-btn” with the value “showListCountries”. Yes, it makes DOM search a bit more complex, but it looks cleaner than using “id=btnShowListCountries” (though that’s a matter of taste).

In the code above, we reinitialize the autocomplete with the same data, but we add the parameter “minLength” set to zero. This tells autocomplete to activate even without any input.

After that, we trigger the “search” event and move the cursor focus to the autocomplete input element using the “focus()” function:

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

And our HTML code looks like this:

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

You can see a working example of the code here.