Typeahead控件不能正常工作

我正在嘗試使用typeahead.js。我的代碼如下所示：Typeahead控件不能正常工作

<input id="query" type="search" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search by typing anything" /> 

... 

var URL_ROOT = '[populated on server. Something like "http://localhost:8080"]'; 
var suggestions = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: URL_ROOT + '/api/suggestions?querytext=%QUERY' 
}); 
suggestions.initialize(); 

$(document).ready(function() { 
    $('input.typeahead').typeahead({ 
    source: suggestions.ttAdapter() 
    }); 
});

頁面加載後，我做不看到在控制檯窗口中的任何錯誤。雖然我鍵入，但我沒有看到任何請求在提琴手的服務器。我期望在我鍵入查看向服務器發出的請求以查找建議時。我究竟做錯了什麼？

來源

2015-01-07 user70192

您能否請您提供一個您傳遞給您的Typeahead實例的JSON樣本？ –

你能告訴我爲什麼我的答案沒有得到賞金？這是第一個也是正確的答案 – arisalexis

@arisalexis - 其他答案更完整。 – user70192

我懷疑這是因爲您的實例Bloodhound並不知道如何處理你正在餵食的遠程數據源。

在：

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')

您指定的 '價值'。您傳遞的JSON是否帶有「值」鍵的JSON對象？如果不是，基準將不會被解析，所以Typeahead不會顯示任何建議。

另外，您的Typeahead實例並不完全正確（文檔參見here）。你缺少一個「選項」對象（如果你對默認值滿意，則傳入null）。此外，數據集數組參數缺少「displayKey」值;這會告訴Typeahead將什麼用作建議值。因此，你應該有：

$('input.typeahead').typeahead(null,{ 
    source: suggestions.ttAdapter(), 
    displayKey: 'value' });

使用遠程數據源Typeahead.js的一個完整的工作的例子可以發現here。

來源

2015-01-09 22:03:57

-4

我覺得jQuery甚至沒有觸發，因爲你有多個class ID。試着改變它

class="form-control typeahead tt-query"

到

class="typeahead"

或者，嘗試從你的jQuery刪除 '輸入'（如下圖所示）

$('.typeahead').typeahead({

來源

2015-01-09 14:19:29

$('input.typeahead').typeahead(null,{ 
    source: suggestions.ttAdapter() 
});

來源

2015-01-09 14:30:13 arisalexis

它很難過看到這個答案沒有得到賞金，因爲它產生的請求，因爲用戶問。回答替代性未提問的問題可以提高答案，但仍然可以，我早在幾個小時前回答了這個問題。有一個高評級應該不重要。 – arisalexis

Typeahead控件不能正常工作

回答

相關問題