13 comments on “Using Twitter Typeahead.js Custom Event Triggers

  1. Thanks for your post!

    It appears like in your sample code the typeahead:autocompleted and typeahead:selected are assigned the wrong functions so they are reporting that the “other one” fired. Following the link that you provided it appears like the source you used may have mixed it up there.

    I have tried to use the typeahead:autocompleted but it never fires. Could you please explain in better details what the autocompleted event is since the selected event is always firing?

    It would be nice if there were a typeahead:highlighted event that will fire when user is hovering over a “suggestion” or is using the arrow keys cycle through them.

    Thanks again!

    • Very good catch, I never noticed that. I’ve done a little bit of digging and here is what I’ve found.

      The :selected is triggered when the user uses Tab to finish what is being suggested in the box for them. :autocomplete is triggered, as you said, when the user uses the arrow keys or clicks the suggestions brought down in the menu.

      To answer your second question, about knowing when an item is being highlighted, they don’t seem to have a quick and easy way of doing it but I have found a way to know if it is selected. They add a CSS class to the highlighted selection called tt-is-under-cursor. You could leverage this in a number of ways. You could alter the CSS to change the highlight of that class or you could use JavaScript to access whatever element had that class on it.

      What I did in my testing of this was to add a .mouseover() class to any object with a tt-suggestion class, these are the drop down selections. It then checked to see if that object had the class .tt-is-under-cursor and displayed that in the console, or at that point you really wouldn’t need to check if it had the class since you are now hovering over the object you want.

      A couple of solutions to your issue but thanks for pointing out the odd behavior of typeahead.js.

  2. In version v0.10.1, this has been fixed/updated.

    From the updated README.md – https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-events

    The typeahead component triggers the following custom events.

    typeahead:opened – Triggered when the dropdown menu of a typeahead is opened.

    typeahead:closed – Triggered when the dropdown menu of a typeahead is closed.

    typeahead:cursorchanged – Triggered when the dropdown menu cursor is moved to a different suggestion. The event handler will be invoked with 3 arguments: the jQuery event object, the suggestion object, and the name of the dataset the suggestion belongs to.

    typeahead:selected – Triggered when a suggestion from the dropdown menu is selected. The event handler will be invoked with 3 arguments: the jQuery event object, the suggestion object, and the name of the dataset the suggestion belongs to.

    typeahead:autocompleted – Triggered when the query is autocompleted. Autocompleted means the query was changed to the hint. The event handler will be invoked with 3 arguments: the jQuery event object, the suggestion object, and the name of the dataset the suggestion belongs to.
    ——-

    Basically if you use the hint option, the autocompleted event fires instead of the selected event.

    Nice catch though for the previous version. It fooled me as well and it was nice to easily find your post about it.

    Cheers!

    Aaron

    • Yes, that’s exactly right. I need to write a new post outlining the new Typeahead as this post is now a bit dated.

      Glad this helped!

  3. Hi Eric, I followed your example but for some reason none of the events fired even once… ‘typeahead:opened’, ‘typeahead:selected’… I believe I did the wrong thing, but it doesn’t work… Please help! Here’s what I did:

    $(‘#mytypeahead’).typeahead({
    source: function(query, process) {
    return [“America”, “Japan”, “Mexico”];
    }
    })
    .on(‘typeahead:opened’, onOpened)
    .on(‘typeahead:selected’, onAutocompleted)
    .on(‘typeahead:autocompleted’, onSelected);

    function onOpened($e) {
    console.log(‘opened’);
    }

    function onAutocompleted($e, datum) {
    console.log(‘autocompleted’);
    console.log(datum);
    }

    function onSelected($e, datum) {
    console.log(‘selected’);
    console.log(datum);
    }

  4. Hi Could anyone assist with typeahead:cursoschanged event i am trying the following and does not seem to work:
    var employeeIdItemCursorChanged = function (eventObject, suggestionObject, suggestionDataset) {
    /* See comment in previous method */
    //employeeNameTypeahead.typeahead(‘val’, suggestionObject.name);
    //employeeNameTypeahead.val(suggestionObject.Doctor_Name);
    alert(suggestionObject.Doctor_ID);
    };

    employeeIdTypeahead.on(‘typeahead:cursorchanged’, employeeIdItemCursorChanged);

Leave a Reply