超級基本的twitter-typehead頁面不能正常工作

我正在嘗試使用「帶段頭的多個段落」來處理我的第一頁，但我很難搞清楚這一點。超級基本的twitter-typehead頁面不能正常工作

JS BIN這裏：http://jsbin.com/degu/5/edit?html,css,js,output

JSON文件都存儲在本地服務器上，從Twitter的typehead網站包含默認數據。

更新JS BIN文件：http://jsbin.com/babe/1/edit?html,js,output

2014-02-07 Ruben Rubovski

控制檯說一堆文件沒有加載;這可能是你的問題。 – Mathletics

我得到的唯一錯誤是從\t「typeahead.js-sports-example.js」其中「Bloodhound未定義第1行」 –

您的jsbin無法正常工作，因爲您使用相對URL加載腳本和數據。例如，當瀏覽器嘗試加載js/bloodhound.js時，該URL將擴展爲http://run.jsbin.com/js/bloodhound.js。 jsbin.com沒有託管這些文件，因此我們無法加載。 – jharding

使用JS斌，我已經重新創建了「死簡單」的例子在typeahead.js例子發現：

http://jsbin.com/levo/1

注意，有這個網站上的其他一些Typeahead.js例子，它們使用jsfiddle.net，我個人比較喜歡JS Bin。

正如你所知道的來源是：

// instantiate the bloodhound suggestion engine 
var numbers = new Bloodhound({ 
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: [ 
    { num: 'one' }, 
    { num: 'two' }, 
    { num: 'three' }, 
    { num: 'four' }, 
    { num: 'five' }, 
    { num: 'six' }, 
    { num: 'seven' }, 
    { num: 'eight' }, 
    { num: 'nine' }, 
    { num: 'ten' } 
    ] 
}); 

// initialize the bloodhound suggestion engine 
numbers.initialize(); 

// instantiate the typeahead UI 
$('.typeahead').typeahead(null, { 
    displayKey: 'num', 
    source: numbers.ttAdapter() 
});

獲得「頁眉多路段」例如工作，你就需要在當地發展，否則你需要使用遠程源，使JS Bin來訪問您的本地託管的json文件。

需要注意的是，爲什麼你的榜樣（即http://jsbin.com/babe/1/edit）是不工作的原因是：

你失蹤了jQuery的1.9+參考
你忘了添加口主體和div標籤

此外，我建議您使用「腳本」元素，而不是將整個庫放入JS Bin「Javascript」部分，以包括依賴關係庫;保留使用引用庫的代碼的「Javascript」部分。

來源

2014-02-07 23:36:22

超級基本的twitter-typehead頁面不能正常工作

回答

相關問題