Programmatically triggering typeahead.js result display

Question

I am using Twitter\'s typeahead.js (https://github.com/twitter/typeahead.js/) on an input field which is pre filled from a query string. After loading the page, i\'d like to

Answer 1

I used twitter bootstrap typeahead, and wamted that on focus, the suggestion list will open. The answers here didn't quite work for me, so I wrote this simple directive (requires jquery):

.directive('typeaheadFocusTrigger', function() {
        return {
            limit: 'A',
            link: function(scope, element, attrs) {
                $(element).on('focus', function(e) {
                    var $target = $(e.target);
                    var origVal = $target.eq(0).val();
                    $target.eq(0).val('').trigger('input')
                    .eq(0).val(origVal).trigger('input');
                });
            }
        }
    });

Now just add this attribute, and it will trigger on focus

<input typeahead-focus-trigger typeahead="">

Answer 2

I took a look at the source code and found this undocumented way:

var $myinput = $('#myinput');
$myinput.data('typeahead')._showDropdown()

Answer 3

This worked for me.

$( document ).ready(function() {
    $('#the-basics .typeahead').typeahead({
      hint: false,
      highlight: true,
      minLength: 0
    },
    {
      name: 'states',
      displayKey: 'value',
      source: substringMatcher(states)
    });

    //set a value to input to trigger opening
    $(".typeahead").eq(0).val("a").trigger("input");
    //remove value for end user
    $(".typeahead").eq(0).val("");

});

See here for example: http://joshuamaynard.com/sandbox/autocomplete

Answer 4

As of Typeahead v0.10.1, changing the value of the typeahead will trigger another query and open the dropdown:

var val = $(".typeahead").typeahead('val');
$(".typeahead").typeahead('val', '');
$(".typeahead").typeahead('val', val);

Answer 5

The other answers were helpful but did not solve my problem. This solution does not involve customising any of the angular-ui code itself and serves the purpose of only triggering the typeahead to fetch results on an explicit button click.

To do this I had to overlay a text field on top of another (disabled) text field that is the actual one with the typeahead. Nobody will know the other one is there but it needs to be there for angular-ui to launch the menu in the correct location. You can't make it a hidden field because it will not be able to show the menu in the correct location.

The directive below will watch the typeaheadText and typeaheadTrigger variables to populate the disbled field when the button triggers this (by setting the trigger to true). The directive has isolated scope so it does not depend on anything other than passed in.

directive('typeaheadTrigger', function() {
  return {
    require: ["ngModel"],
    scope: {
      typeaheadText: '=',
      triggerFlag: '='
    },
    link: function(scope, element, attr, ctrls) {
      scope.$watch('triggerFlag', function(value) {
        if (scope.triggerFlag) {
          ctrls[0].$setViewValue(scope.typeaheadText);
          scope.typeaheadText = '';
          scope.triggerFlag = false;
        }
      });
    }
  };
})

The controller sets a few things up for this - the trigger and text scope variables inside an object. This demonstrates how to do it - ideally you'd wrap this whole thing in another directive so it can be used in your application while hiding the details.

Here's the plunk: http://plnkr.co/edit/UYjz6F5ydkMQznkZAlfx?p=preview

Answer 6

To anyone finding this issue with twitter's typeahead after version 0.11.1, here is how I solved it with one line:

$(".typeahead-input").typeahead('val', "cookie")
                     .trigger("input")
                     .typeahead('open');