So i have 2 combo boxes showing results in the form of parent child relationship. The parent combobox has items like Countries say, and the child combobox has states as its items. Depending on what was chose in the parent combo box, the child combox box gets populated. Now i want to add a search bar above them so that when a user types something in it, i want to filter the items, in both the combo boxes, how best to design this so that its user friendly and intuitive? Any ideas? thanks
In your case "Parent−child" control is the mean to make the process of a target selection in a more easy way. The final target is the child in the process, right?
So thinking about filter control as an alternative way of getting the target, consider the users' goal. Again, it's the child selection.
My proposition is to use filtering element, where you point both the child info (final target) and parent info (which adds context). Let's assume user searches for Athenes. Then the filter control could look like pictured:
So this is user friendly solution, which is your primary goal. How to be with comboboxes? It's not the primary goal, but you could fill them taking into account filter data, where both parent and child are selected.
To extend slighty on Alexey's answer,
I took your problem statement (combobox of countries + combobox of states/regions) and transformed it into Alexey's solution earlier this year. The results have been very favorable!
I did have one twist, in that the destination of this selection could contain multiple types of information. So when the user starts typing into the filter, they may see a few different types of objects:
The previous UI design required the user to first select the type they wanted to add (e.g., "Country/Region") from a radio button set, then select the option from a drop down (or 2 drop downs, in the case of Country/Region). By using the typeahead, the user is able to filter to the appropriate entry regardless of type.
Having the multiple types in the results selection has not been a problem, as what can (and can't) go into the destination field is well understood by our user base.
I think you are adding too much complexity when it's not needed.
You are already providing a filter and a further sub-filter. Perhaps you should consider either just the combo boxes or just the predictive search. In practice, I've only ever seen one and not both.
Providing too many options can complicate it for your audience, especially as it's for a simple input where you want to reduce cognitive load as much as possible.
Consider first, what is the issue you are trying to solve? Looks like you are trying to provide an easy access to a long list of items.
If there are only ~100 options like in your example of country and state, the parent and child search should suffice.
Recall that the behaviour is there whereby the user can still focus on the combobox and start typing for it to jump to what they need.
If there are way more, or if you want to provide direct access to the entire list, then a search makes sense, but not both.
Hope this helps.