如何使用Twitter的typeahead.js自动完成div

Question

在输入上使用typeahead.js就可以了

像这样：

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

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

当输入为'a'时，它可以显示为“Alabama”，“Alaska”。 但是当我喜欢这样的时候：

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

它不起作用。 我该怎么做才能保存它？

Answer 1

这在技术上应该可以看到Twitter本身使用一个可信的div来撰写推文。 虽然他们可能正在使用自己的javascript魔法或typeahead.js中未包含的其他脚本

一个快速的解决方案是使用At.js ，它非常适用于可信的 div。 只需给它一个空的“at”属性。 请注意，如果您想扩展默认回调，您仍然可以插入Bloodhound，例如：

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

Answer 2

正如他们的文件所示：

将任何input[type="text"]元素转换为预先输入。

您似乎只允许使用type =“text”的输入。