Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent Twitter typeahead from filling in the input with the selected value?

I'm using Twitter's typeahead plugin for autocompletion with a text input. I want to change the behavior so that instead of putting the selected option's value into the text input (when clicked), it does something else with it.

Is there any way to prevent typeahead from automatically filling in the input with the selected option's value?

like image 741
Nate Avatar asked Dec 07 '22 01:12

Nate


2 Answers

Struggled with this for a while, before I found how to clear the text when you select an option:

$("#typeahead-input").on('typeahead:selected', function (event, datum, name) {
   $(this).typeahead("val", "");
   // Do something with the datum...
});
like image 58
Spooner Avatar answered Dec 08 '22 13:12

Spooner


I tried every other thing under the sun, but just stumbled across a solution a few minutes after posting my question.

In case anyone else needs help with this, adding the typeahead:closed event handler allows you to catch the entered value, as well as clear it from the input before it can be seen (maybe there's a way to prevent it from ever being entered into the input, but I haven't been able to find it).

So here's what I'm doing:

      $("#input").typeahead({
            highlight: true
        },
        {
            name: 'my-dataset',
            displayKey: 'value',
            source: bloodHound.ttAdapter()
        }
    ).on('typeahead:closed', function (obj, datum, name) {
          $(obj.currentTarget).val("");
      });
like image 44
Nate Avatar answered Dec 08 '22 14:12

Nate