Remove Twitter Typeahead from Text Box

Question

I am trying to disable all text boxes on my form. One of these boxes has a typeahead on it. When I do:

$(#textbox).attr('disabled', true);

It is no longer enabled, but the color does not switch like all of the other text boxes do when they become disabled.

I believe this is due to the twitter typeahead and I am wondering if there is a way around it. Does anyone know how to override the text box background color or remove the typeahead completely when the text box is disabled?

I have tried .unbind() and .addClass("greyBackground") but neither of these seem to do the trick.

Answer 1

If you don't care about maintaining the typeahead.js functionality while the textarea is disabled, you can destroy the typeahead like so:

$('#textbox').typeahead('destroy');

This will reset/remove any attributes/styles typeahead.js may have added. If later on you wanted to add back the typeahead.js functionality, you could reinitialize it with:

$('#textbox').typeahead({ /* configs */ });

Also, typeahead.js doesn't support textarea elements out of the box, so unless you're using a forked version, you shouldn't assume typeahead.js will work as expected.

Answer 2

In Bootstrap 2.2.2 there is no .typeahead('destroy') function, so the following does remove all the listeners it was previously bound to and the DOM element it has created.

$('#textbox').off()
        .data('typeahead')
        .$menu
        .off()
        .remove();