Dependent Auto Suggest with jQuery

Auto suggesting feature for a form field will reduce user’s effort while entering input data. In this post we are going to see how to do auto suggest for a dropdown field depends upon the result of another dropdown. In previous post we have seen how to create dependent dropdown and dropdown with auto suggest, separately.

In this post we have two dropdowns with auto suggest and search features. On changing the first dropdown option we call jQuery to load the dependent option results for the send dropdown. The dependency is found based on the keyword match.

View Demo


HTML Dependent Dropdown

This code contains dropdown fields for country and country-dependent information. The options to these dropdowns will be load by using jQuery select2.

<div id="frm-dropdown">
	<select id="country" style="width:250px;">
	<option>Choose Country</option>
	<!-- Country List -->
	<select id="country_info" style="width:250px;">
	<!-- Country - Dependent List -->

Auto Suggesting Dependent Results using jQuery

In this jQuery code we have two arrays containing option values for the dropdowns. One is the list of counties and the other is the list of country based information.

While selecting country, jQuery script will check if any keyword match is found in the array containing country-based information array. Then the matched results will be pushed to the suggested list.

<script type="text/javascript">
	$(document).ready(function() {
		var country = ["Australia", "Bangladesh", "Denmark", "Hong Kong", "Indonesia", "Netherlands", "New Zealand", "South Africa"];
		  data: country
		var country_info = ["Australian Open Tennis", "Tourism Australia","Australian Election","Denmark Flag","Study in Denmark"];
		$("#country").on("change",function() {
			var selected_country = $(this).val();
			var selected_country_info = [];
			$.each(country_info, function( key, value ) {
			  if(value.indexOf(selected_country)!= -1) {
			  selected_country_info.push(value );
	function loadCountryInfo(country_info) {
		  data: country_info

View DemoDownload

This jQuery code tutorial was published on June 14, 2016.

↑ Back to Top