38

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 programmatically trigger the display of typeahead results without the user needing to type anything in the form field.

Out of the box, typeahead.js is only triggered if the user manually types something into the input field and i can not find any method in typeahead.js which i could call to trigger the display of results.

Any pointers would be greatly appreciated.

Thanks!

2
  • 1
    Thanks for all the fantastic answers folks! I picked the one via triggering input since that also forces typeahead to search for the keyword before displaying the results (a requirement for me, which i realize was not in my question). Thanks again. Stackoverflow is way better than sliced bread. Commented Feb 28, 2013 at 7:40
  • can use prefetch feature Commented Oct 25, 2017 at 8:54

17 Answers 17

51

Triggering input seems to do it.

$(".typeahead").eq(0).val("Uni").trigger("input");

Tested this on the example page.

15
  • 1
    Hi, this works beautifully except in IE (who would have guessed). IE just seems to return a jQuery object as shown here: shorttext.com/SuWiMi I am not good enough in JS to debug this, so if anyone would have a suggestion, i'd love to hear it. Thanks! Commented Mar 4, 2013 at 9:34
  • 1
    swap it to "paste" instead of "input" Commented Mar 4, 2013 at 13:18
  • 2
    And without the "Uni", can you do it? =\
    – Alix Axel
    Commented Sep 12, 2013 at 0:40
  • 10
    For anyone looking at this for later versions of typeahead you can use $(".typeahead").typeahead("setQuery","Uni").focus(); because setQuery is the preferred API approach to setting a query value.
    – Pricey
    Commented Sep 25, 2013 at 14:49
  • 5
    @Pricey: I think setQuery was removed in 0.10. I tried it and I get an error
    – Phil
    Commented Feb 24, 2014 at 17:21
16

According to my tests (see fiddle), the focus() method is necessary in order to display the dropdown. So:

theVal = $('.typeahead').val();
$(".typeahead").typeahead('val', '')
$(".typeahead").focus().typeahead('val',theVal).focus();
  • On line 1, we're assigning the current value of the Typeahead input to the variable theVal;
  • On line 2 we simply reset typeahead's computed value; and
  • On line 3 we're putting back the original value and the focus, which results in the suggestion dropdown displaying as if the user had typed something.

I actually needed this to strongly encourage users to select from the Bloodhound suggestions coming from a geocoding API call so I could ensure the coordinates were obtained by the client prior to submitting a form.

0
10
$(".typeahead").typeahead('lookup').focus();

triggers with existing value of input. you can change the value in advance of course

0
9

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');
8

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);
1
  • this is the only one that worked for me (v0.11.1), except that I had to change the first line to: var val = $("#original-input-id").typeahead('val'); where #original-input-id is the id of my input textfield on which I've added the .typeahead class
    – Prid
    Commented Jul 6, 2019 at 23:07
5

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="">
1
  • trigger('input') doesn't on IE So just updated it to: trigger('change') for all browses. Commented Jul 20, 2016 at 10:18
5

Using: Typeahead v0.10.5

Don't use: $('.typeahead').typeahead('open');

This currently does not work. Source: https://github.com/twitter/typeahead.js/issues/798. As a temporary fix, use a a custom jQuery keydown event (after you have instantiated the typeahead):

var ttInstance = $('.typeahead').typeahead( config ); // Create Typeahead
ttInstance.typeahead('val', 'pancakes'); // Set an initial value

var evt = jQuery.Event('keydown');
evt.keyCode = evt.which = 40;
ttInstance.trigger(evt); // Opens the dropdown
1
  • Out of all answers given here, this was the only one that worked for me.
    – OliverM
    Commented Feb 23, 2016 at 11:58
3

Looking through the source code, it appears to store a TypeaheadView object in the element data under the key typeahead. This TypeaheadView object has an internal method, _showDropdown, which is internally bound to the focus event (and a few others).

I would not recommend doing this, but you should be able to call that internal method manually:

$('#yourTypeaheadElement').data('typeahead')._showDropdown();

Alternatively, have you just tried simply focusing your typeahead element when the page loads (after initializing it as a typeahead element, of course):

// after page loads and yourTypeaheadElement is initialized as a typeahead
$('#yourTypeaheadElement').focus();
1
  • This doesn't seem to be for typeahead*.js*.
    – Alix Axel
    Commented Sep 12, 2013 at 0:39
3

None of these will work unless you deliberately put 'typeahead' into the classes of your input tag. If you don't feel the need to do this (it's not necessary for it to work), you're better off using the class written onto the input tag by typeahead.js. It's ".tt-input". Here's the example I cribbed from Sam_Butler, recoded for the new CSS class. This works for me in the most recent typeahead 0.10.5:

var theVal = jQuery('.tt-input').val();
jQuery(".tt-input").typeahead('val', 're')
jQuery(".tt-input").focus().typeahead('val',theVal).focus();
2

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

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

This should work with the "old" bootstrap typeahead plugin:

$(".typeahead").eq(0).trigger("keyup");

Haven't tested with IE unfortunately... Don't know about the new typeahead plugin...

2

Here's a simplified version of @Sam_Butler's work: http://jsfiddle.net/rimian/hrnf9

<button type="button" id="button">Crick</button>
<input type="text" id="text" class="typeahead">

Javascript:

$('#button').click(function() {
  $("#text").focus().typeahead('val', 'London');
});

// instantiate the bloodhound suggestion engine
var locations = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address=%QUERY&components=country:GB&sensor=false&region=uk', //add key
        filter: function (locations) {
            return $.map(locations.results, function (location) {
                return {
                    value: location.formatted_address
                };
            });
        }
    }
});

locations.initialize();

$('#text').typeahead(null, {
    name: 'value',
    displayKey: 'value',
    source: locations.ttAdapter()
});
1
  • This worked great for me. I already had a value in the text field so i just saved that in a var, emptied the val in typeahead and then set the prev value again and it opened the search. Maybe a hack but works fine.
    – Olaj
    Commented Jan 7, 2016 at 9:22
1

Be careful with this!

For those who are thinking about trigger typeahead behavior manually (on a button click for example) I strongly recommend you to don't do this.

I came for this solution and I lost almost an entire day making workarounds to it work properly (in my case that was a button click).

For those who really want go by this dark way, I share with you my ugly code that makes it work:

//Removes default features of typeahead
//This means that typeahead will not work like an "autocomplete", it only will be trigged when the user Click in #btnSearch button!
var txt = $("#typeahead");
//Save input events in variables (we'll need them)
eventInput = $._data(txt[0], "events").input[0];
eventBlur = $._data(txt[0], "events").blur[1];
//Remove input events
txt.unbind("blur");
txt.unbind("input");

//Set click event that triggers typeahead features manually
$("#btnSearch").click(function () {
    //Clears the cache of engine for it call ajax again, without it when the term was already searched the ajax is not called!
    engine.clearRemoteCache();

    txt.focus(); //When we click in a button, the focus from input is lost, so we set it again to not lose the behaviors of keyboard keys (up, down, tab, etc)
    txt.bind("input", eventInput); //Bind the event that we had saved
    txt.trigger("input"); //Trigger input (like the answer from @epascarello)
    txt.unbind("input"); //Removes it again 
});

//Set event on parent of the suggestion's div, this makes the sugestion div close when user click outside it
$("body").click(function () {            
    if (eventBlur != undefined) {
        if ($(".tt-dropdown-menu:visible").length > 0) {
            eventBlur.handler(); //This event closes the suggestion menu
        }
    }
});

Another thing that I did was change a code of the event "_checkInputValue" on typeahead.js. I change this:

areEquivalent = areQueriesEquivalent(inputValue, this.query);

to this:

areEquivalent = false;//areQueriesEquivalent(inputValue, this.query);

I set it to false because typeahead don't send two identical requests to server. This occur when the user clicks twice in the search button (I mean, when he searches more than once the same text that he has already searched for). Anyway, if you are using local data you won't need to do this.

1

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

1
  • This works but is not perfect, when you select and after clicking again won't display
    – Eben Watts
    Commented Apr 16, 2022 at 2:50
1

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

0

I used this to manually trigger a selection, when 1 item was in the tt-dataset. It just made sense to add this.

$("#mytypeahead").keyup(function (e) {
                var charCode = (typeof e.which === "number") ? e.which : e.keyCode;
                if (charCode == 13) {
                    if ($(this).parent().find(".tt-dataset").children().length == 1) {
                        //This is how we are submitting a single selection on enter key
                        $(this).parent().find(".tt-dataset").children(0).addClass("tt-cursor");
                        var kde = jQuery.Event("keydown");
                        kde.which = 13;
                        $(this).trigger(kde);                           
                    }    
                }                    
            });
0

I tried every method here but it was not working, only by using

$(".typeahead").val('hi').trigger('keyup');
$(".typeahead").val('hi').trigger('keydown');

The above code it worked for me. Don't know what exactly happened but using neither one worked only by using both it got worked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.