How to autocomplete div with typeahead.js of Twitter

Question

Use typeahead.js on input is ok

Like this:

<input type="text" class="typeahead" />

!function(source) {
    $('.typeahead').typeahead({
        source: source
    });
 }(["Alabama","Alaska"]);

When input is 'a' it can appear "Alabama","Alaska". But when I do like this:

<div contenteditable=true class="typeahead" id='div1'>
!function(source) {
    $('#div1').typeahead({
        source: source
    });
 }(["Alabama","Alaska"]);

It doesn't work. What can I do to save it?

Answer 1

This should technically possible seeing as Twitter themselves use a contenteditable div for composing tweets. Although they are probably using their own javascript magic or another script not included in typeahead.js

A quick solution would be to use At.js which works extremely well for contenteditable divs. Simply give it an empty "at" attribute. Note that you can still plugin Bloodhound if you want to by extending the default callbacks, eg:

$.fn.atwho.default.callbacks.remote_filter = function(query, callback) {
  bloodhoundEngine.get(query, function(suggestions){ callback(suggestions); });
};

Answer 2

As their documentation indicates:

Turns any input[type="text"] element into a typeahead.

It seems you are allowed to only use inputs with type="text".