I use typeahead.js as autoplete textbox.

At first, when I input and select a value from the suggestions, textbox sets the value correctly. Then, I input a value that is not in the suggestions and press tab and the value of the textbox doesn't clear.

How do I clear the value of the textbox when the input value is not in the suggestions.

I use typeahead.js as autoplete textbox.

At first, when I input and select a value from the suggestions, textbox sets the value correctly. Then, I input a value that is not in the suggestions and press tab and the value of the textbox doesn't clear.

How do I clear the value of the textbox when the input value is not in the suggestions.

• javascript
• autoplete
• typeahead.js

4 Answers 4

I ran into the same situation and the way I solved this was by using the events of typeahead.js. I record a selection on typeahead:select and then check on typeahead:change if the selection was made. If no selection was made, I reset the input to the original value.

// Initialize typeahead as ususal
var $myTypeahead = $("#my-typeahead");
$myTypeahead.typeahead(/* Set-up typeahead here */);

// Set up variables to store the selection and the original 
// value.
var selected      = null;
var originalVal   = null;

// When the typeahead bees active reset these values.
$myTypeahead.on("typeahead:active", function(aEvent) {
   selected       = null;
   originalVal    = $myTypeahead.typeahead("val");
})

// When a suggestion gets selected save that
$myTypeahead.on("typeahead:select", function(aEvent, aSuggestion) {
   selected = aSuggestion;
});

// Once user leaves the ponent and a change was registered
// check whether or not something was selected. If not reset to
// the original value.
$myTypeahead.on("typeahead:change", function(aEvent, aSuggestion) {
   if (!selected) {
      $myTypeahead.typeahead("val", originalVal);
   }

   // Do something with the selected value here as needed...
});   

If you are using typeahead.js with Bootstrap Tags Input, which I highly remend due to it's power, there is an option called freeInput that you can turn false to not allow tags that are not returned by typeahead's source.

Here's an example of how you can use it:

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  },
  freeInput: false
});

That way, your tags will be limited to what the source returns, like Amsterdam, Washington, Sydney ...

now in 2020 I have the same issue, i share with yours my code, solve my problem.

Afert typeahead input i have a hidden input to capture id of selected element.

Typeahead have event called " render: Fired when suggestions are rendered for a dataset. The event handler will be invoked with 4 arguments: the jQuery event object, the suggestions that were rendered, a flag indicating whether the suggestions were fetched asynchronously, and the name of the dataset the rendering occurred in. "

Use this event and checking value of hidden input i wrote this code:

#pais is typeahead input.

#id_pais is hidden input.

$('#pais').bind("typeahead:render", function(e, data, name) {
  $('#id_pais').val('');
});

$('#pais').bind("typeahead:change", function(e, data, name) {
  var valor = $('#id_pais').val();
  if (valor == '' ) {
    $('#pais').val('');
  }
});

sorry for my english, im spanish speaker.

Just check for the tab key code when keys are pressed...

    $('.typeahead').typeahead(null, {
        name: 'typeahead_name',
        displayKey: 'value',
        source: typeahead_name.ttAdapter()
    }).on('keydown', function (e) {
        if( e.which == 9 ) {
            console.log('tab pressed!');
            $('.typeahead').val(''); // clear typeahead field
            return false; // prevent further action
        }
    });

List of keys you can use: http://www.cambiaresearch./articles/15/javascript-char-codes-key-codes More info on jQuery Keydown event: https://api.jquery./keydown/