UIKIT Trigger dropdown from outside with Search

by Greggg

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<div id="container">
      <input type="text" placeholder="Select" class="uk-width-1-1 uk-select" >

    <div data-uk-dropdown="mode:click; pos: bottom-justify">
    
      <div class="uk-search uk-search-default uk-width-1-1">
        <span class="uk-search-icon-flip" uk-search-icon></span>
        <input class="uk-search-input" type="search" placeholder="Search...">
    </div>

      <ul class="uk-nav uk-nav-default uk-dropdown-close">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Legal</a></li>
      </ul>
    </div>
    
  </div>

CSS

body {
  padding:1rem;
}

JavaScript

$('#container .uk-search-input').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 .uk-select').val(e.target.textContent);
});