UIKIT Trigger dropdown from outside with Search

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/css/uikit.min.css">
<div id="container">
  <div class="uk-button-dropdown uk-width-1-1 uk-form" data-uk-dropdown="{mode:'click', justify:'#container'}">
    
    <div class="uk-form-icon uk-form-icon-flip uk-width-1-1">
      <i class="uk-icon-caret-down"></i>
      <input type="text" placeholder="Select" class="uk-width-1-1 select" disabled>
    </div>

    <div class="uk-dropdown uk-dropdown-scrollable">
      <div class="uk-form-icon uk-form-icon-flip uk-width-1-1">
        <i class="uk-icon-search"></i>
        <input type="text" placeholder="Type page to filter" class="uk-width-1-1 search">
      </div>
      <ul class="uk-list uk-list-space">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Service</a></li>
        <li>
          <ul class="uk-list uk-list-space">
            <li><a href="#">Service 1</a></li>
            <li><a href="#">Service 2</a></li>
          </ul>
        </li>

        <li><a href="#">Contact</a></li>
        <li><a href="#">Legal</a></li>
      </ul>
    </div>
    
  </div>
</div>

CSS

body {
  padding:1rem;
}

JavaScript

$('#container input.search').keyup(function(){
  console.log(this.value);
  var re = new RegExp(this.value, 'i');
  var lis=this.parentNode.parentNode.querySelectorAll('li');
  for (var i=0; i<lis.length; i++){
    $(lis[i]).toggle(re.test(lis[i].textContent));
  }
})
$('#container li').click(function(e){
  $('#container .select').val(e.target.textContent);
});