chosen dropdown open programmatically without having focus

62 Views Asked by At

I have made a virtual keyboard which I use to write to a hidden input field.

I would like to use this field to update the search field in a chosen dropdown and also to get the dropdown to open when I start to type with the virtual keyboard and to stay open until I choose an option.

I have made a simplified fiddle: https://jsfiddle.net/Anja_Reeft/L5zku4pt/7/ without the keyboard stuff.

<input type="text"  id="searchDropdown-input" oninput="updateDropdownSearch()">
<div>
    <select id="countrySelect" data-placeholder="Choose a Country..." class="chosen-select"  style="width:350px;" >
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Aland Islands">Aland Islands</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
        <option value="American Samoa">American Samoa</option>

      </select>    
</div>

function updateDropdownSearch()
{
  console.log("updateDropdownSearch");
  console.log("input " + $("#searchDropdown-input").val());
  document.querySelector("div.chosen-search input[type='text']").value = $("#searchDropdown-input").val();
  console.log("search " + document.querySelector("div.chosen-search input[type='text']").value);
  $("#countrySelect").trigger("chosen:updated");
  $("#countrySelect").trigger("chosen:open");
}

I can open the dropdown, but it closes when it lose focus, so I would like to know if it's posible to have the dropdown to open without it having the focus

(focus must stay on keyboard, or in the fiddle on the input field)

0

There are 0 best solutions below