Twitter bootstrap typeahead custom keypress ENTER function

Question

I'm working with Twitter bootstrap on a Django site I'm making. I have a page where users can enter all of their technical skills in a text input equipped with a bootstrap typeahead. I'm trying to access the text within the currently selected within the dropdown menu, such that when ENTER is pressed and an element is highlighted in the dropdown, it takes that value and displays it below the input text field. Then the input text field is cleared and the user can search for another skill.

$(document).keyup(function(event) {
    if (event.keyCode == 13) {    
      if ($('.dropdown-menu').css('display') != 'none'){
        var newskill = $(".dropdown-menu > li.active").val();
        alert('Yay');
      }
      else{
        var newskill = $("#enterbox").val();
        alert('Boo');
      }      
      return false;
    }
  });

If the dropdown is visible, then the enter keypress function takes the currently active element of the dropdown and pastes it into the text box (built in to Bootstrap). No alert box shows. Any idea how I can get my function to trigger before that happens, ie before Bootstrap's function kicks in?

Crossfertilize

Answer 1

Demo

Instead of listening for a keypress (what if the user makes a selection with their mouse?), we can take advantage of the custom events Twitter's Typeahead emits. Namely,

• typeahead:selected – Triggered when a suggestion from the dropdown menu is explicitly selected.

Capturing the selection

You can listen for it using jQuery's .on() method, and you will be provided with information about the user's selection in the second argument.

$('input.typeahead').on('typeahead:selected', function(event, selection) {
  alert(selection.value);
});

Clearing the input field

From there you can do as you like with the selection.value. The only "gotcha" would be trying to clear the input using .val(). Since Typeahead does quite a bit of fancy DOM rewriting, you'll need to use their 'setQuery' method as well.

$('input.typeahead').typeahead('setQuery', '');

Tipi

Not the same thing @robin.gomez The question here was "how do I perform an action upon successful selection", the issue you referenced is "how do I make the enter key pick the first suggestion". – Tipi

@Sinetheta: any idea how to capture this event in Angular without the use of JQuery ? please can you help on this question, because the enter key is selecting whatever is highlighted and it's a very bad behavior. because the enter key will pick a random currently highlighted item. --> #52486055 – Hendecagon

This is what i need – Monmouthshire

Answer 2

Yo can attach the listener on your typeahead code like below;

 $('#input').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'some name',
        displayKey: 'value',
        source: data.ttAdapter(),

    }).on('keyup', this, function (event) {
        if (event.keyCode == 13) {
            $('#input').typeahead('close');
        }
    });

Criminology

Answer 3

$(document).keyup(function(event) {
    if (event.keyCode == 13) {    
    $('#yourtextbox').val("");  
    $('#yourtextbox').typeahead('close');
    }
  });

you can find the documentation of typeahead here https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

Seaddon