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

从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

Typeahead的Bootstrap输入

1 个答案: