-2
我試圖在Bootstrap 3輸入框上實現typeahead。我跟着幾個網站,無法讓它彈出建議。我想爲它通過一個JSON對象,看起來像只是標題和作者搜索:使用Typeahead的自舉輸入
{
"tile": "Title",
"author": "Author",
"notes": [
{
"chapter": "1",
"notes": "This is a note"
}
]
}
這是我到目前爲止有:
HTML<div class="form-group">
<input type="text" id="searchbox"class="form-control typeahead" placeholder="Search TextNotes" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;" onfocus="change_button_color()" onblur="button_color_reset()" autocomplete="off" data-provide="typeahead">
</div>
實施
var cloudmineData;
$('#searchbox').typeahead({
source: function (query, process) {
titles = [];
map = {};
$.each(cloudmineData, function (i, book) {
map[book.title] = title;
titles.push(book.title);
});
process(titles);
},
updater: function (item) {
selectedBook = map[item].title;
return item;
},
matcher: function (item) {
if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
return true;
}
},
sorter: function (items) {
return items.sort();
},
highlighter: function (item) {
var regex = new RegExp('(' + this.query + ')', 'gi');
return item.replace(regex, "<strong>$1</strong>");
},
});
function change_button_color()
{
document.getElementById("searchbutton").style.backgroundColor = "#2494DC";
document.getElementById("searchbutton").style.color = "#FFFFFF";
document.getElementById("searchbutton").style.borderLeftColor = "#055D96";
//get json object when text box is clicked
}
function button_color_reset()
{
document.getElementById("searchbutton").style.backgroundColor = "";
document.getElementById("searchbutton").style.color = "";
document.getElementById("searchbutton").style.borderColor = "";
}
你可以得到所有的演示文檔ation from:[link](http://getbootstrap.com/2.3.2/javascript.html#typeahead) – 2015-02-11 10:20:06
您使用的是typeahead.js的當前版本嗎?在那裏的文檔中沒有提及更新程序,匹配程序,分類程序等。你有沒有考慮使用血獵犬? – 2015-02-11 11:18:36