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 bootstra

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

Answer 2

$(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

Answer 3

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