CODEWITHSUNDEEP
javascripttypeahead
gumpg
gumpg

Reputation: 95

How to autocomplete div with typeahead.js of Twitter

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?

Upvotes: 0

Views: 690

Answers (2)

ben.bourdin
ben.bourdin

Reputation: 1362

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, e.g.:

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

Upvotes: 2

Nicolae Olariu
Nicolae Olariu

Reputation: 2555

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".

Upvotes: 0

Related Questions