使用Typeahead引导输入

Question

我正试图在Bootstrap 3输入框上实现typeahead。我关注了几个网站，但无法让它弹出建议。我试图让它只搜索一个json对象的标题和作者，这个对象看起来像：

{
    "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 =  "";
}

Answer 1

从链接下载并将此文件添加到脚本中。

引导程序-类型ahead.min.js

您的HTML代码

    <div class="form-group">
      <input type="text" id="searchbox"class="form-control typeahead" placeholder="Search TextNotes" >
   </div>
   <ul class="typeahead dropdown-menu"></ul>

javascript:

    var typeaheadSource = [{},{}];//your object
    $('#search_name').typeahead({
     source: typeaheadSource,  //for direct data 
     items: '10',
     display: 'author'
     //ajax: '/client/ajaxsearch' //use this to get dynamic data
    });

转到文档