Searchable multi-level dropdown in Semantic - semantic-ui

Question

I'm trying to make a dropdown with submenus and a search box. So far the search string only applies to the first level menu and does not look into second level menu items. Is there a way to perform the search beyond the first level?
Minimal example here:
HTML:
<div class="ui segment">
<div class="ui search selection dropdown" id="test">
<span class="text">Search Selection</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
</div>
</div>
</div>
JS:
$('#test')
.dropdown();
CSS:
.ui.selection.dropdown .menu {
overflow: visible !important;
}
JSFiddle link:
https://jsfiddle.net/o1aLysve/