Auto-suggest 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 a 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 drop down. The dependency is found based on the keyword match.
This code contains drop-down fields for the 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> <select id="country_info" style="width:250px;"> <option>Select</option> <!-- Country - Dependent List --> </select> </div>
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 a 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.
This jQuery code tutorial was published on June 14, 2016.