Bootstrap input with Typeahead

Question

I am trying to implement typeahead on a Bootstrap 3 input box. I followed a few websites and cannot get it to pop up with suggestions. I am trying for it to search through only the title and author of a json object that looks like:

{
    "tile": "Title",
    "author": "Author",
    "notes": [
         {
            "chapter": "1",
            "notes": "This is a note"
         }
     ]
}

This is what I have so far:

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>

Implementation

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

Download from link and add this file to your script.

bootstrap-typeahead.min.js

your HTML CODE

    <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