如何使用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”的輸入。