how to display the Twitter's Bootstrap 2.x typeahead on demand?

Question

Hi I need to trigger the show with jquery bootstrap typeahead, and tried to simulate a key press but no way of showing the typeahead.
Typeahead there any event that triggers the same effect as pressing a key?
Any suggestions?

Answer 1

Also read Definitive way to trigger keypress events with jQuery. The problem seems you first have to focus, so try to use this function:

function triggertypeahead(element,value,empty)
{    
    empty = typeof empty !== 'undefined' ? false : true;
    element.focus();
    element.val(value);
    element.trigger(jQuery.Event('keyup'));
    if(empty)element.val('');
}

example:

<input id="typeaheadinput" type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap-master/js/bootstrap-typeahead.js"></script> 
<script>

function triggertypeahead(element,value,empty)
{    
    empty = typeof empty !== 'undefined' ? false : true;
    element.focus();
    element.val(value);
    element.trigger(jQuery.Event('keyup'));
    if(empty)element.val('');
}

triggertypeahead($('#typeaheadinput'),'al');



</script>     

See also: http://bootply.com/65987