使用Typeahead的自举输入

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

来源

2015-02-10 heinst

你可以得到所有的演示文档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

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

引导-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

来源

2015-02-11 10:34:54

使用Typeahead的自举输入

回答

相关问题