Bootstrap 使用 Typeahead 输入

Question

我正在尝试在 Bootstrap 3 输入框上实现提前输入。我关注了几个网站，但无法让它弹出建议。我试图让它只搜索 json object 的标题和作者，如下所示：

{
    "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></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

从 link 下载并将此文件添加到您的脚本中。

bootstrap-typeahead.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
    });

Go to Documentation

Bootstrap 使用 Typeahead 输入

Bootstrap input with Typeahead

twitter-bootstrap

bootstrap-typeahead

typeahead.js

twitter-bootstrap-3