[Solved]-Twitter bootstrap typeahead custom keypress ENTER function

by

29👍

✅

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

11👍

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

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

👤Emiliooo

Leave a comment