How to display typeahead.js dropdown data on button click event?

Issue

I'm trying to find a way to make use of bootstrap-tagsinput library with Bootstrap-3-Typeahead to a create a tagging input field with combo box functionality. So then the user can see the available items without getting it when typing.

I'm in the beginning of creating it and so far I was able to run the tags-input with typeahead safely. So now it will show all its data when the text field get focused.

Later I found that it's happening by triggering the focus function of it. But I can't trigger it the way I tried to.

How can I show the dropdown list after a button click event happens?

This is my code so far:

<script>
$(document).ready(function() {  

    $('#device').tagsinput({
          typeahead: {
            source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'],
            autoSelect: false,
            showHintOnFocus : true,
            minLength : 0
          }
    });

    $('#myButton').click(function() {
       $(".typeahead").trigger("focus");  // wont work
    });

});
</script> 

<div class="container">
<div class="bs-example">
    City : <input id="device" ></input>
    <button id="myButton" >Show</button>
</div>  
</div>

Any suggestions?

Solution

You can do it by trigger keyup on the hidden <input> element :

$('#device').tagsinput({
   typeahead: {
     source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo', 'Berlin', 'Stockholm', 'Copenhagen' ],
     autoSelect: false,
     minLength : 0
   }
});     
//trigger the typeahead
$('#myButton').click(function() { 
   $(".bootstrap-tagsinput input").val('');
   $(".bootstrap-tagsinput input").trigger('keyup');
});

The only "but" here is : You must comment out one line [#408] in the typeahead source to prevent it from closing on mouseover, due to the mismatch between focused and shown that occured when we tricked the typeahead to open :

mouseleave: function (e) {
  this.mousedover = false;
  //if (!this.focused && this.shown) this.hide(); <-- line #408
}

demo -> http://plnkr.co/edit/TU7HUS49mck7BMJhMd1B?p=preview

---

Trick to have "unlimited" items with scrollable menu :

.dropdown-menu {
    overflow-y : scroll;
    max-height: 250px !important;
}

in options

items : 1000,

http://plnkr.co/edit/7yDk829M3wavyn1oJoAE?p=preview

Answered By - davidkonrad