在 Bootstrap 3 中向 Wide Searchbar 添加自动完成功能

Question

过去几天我一直在做一个我认为非常简单的任务：在 Bootstrap 中为搜索栏提供自动完成功能 3. 我想要实现的是将它集成到Bootstrap 3 不破坏布局的设计。

我研究了同时使用 twitter-typeahead.js 和 bootstrap3-typeahead 的方法。

部分困难可能是我想要一个大搜索框作为 'navbar-fixed' 元素的一部分，我使用了这个解决方案/解决方法：

我面临的挑战是，每当我包含预输入 class 时，搜索栏的样式就会变回不同的 css 样式，从而破坏布局。然后我尝试使用 autocomplete.js.

进行相同的操作

此时自动完成功能的实际级别非常微不足道，我只想匹配确切的字符串，所以我不关心确切的实现 - 我唯一的要求是：(1) Typeahead/autocomplete 和(2) 将宽搜索栏保留在 Bootstrap 导航栏搜索栏

中

有人知道如何实现吗？

Answer 1

试试这个代码

var indicator=["aaa","abc","def","rrr","yyyt"];
function searchautocomplete(itemclass,data){
      $(itemclass).typeahead({
                  hint: true,
                  highlight: true,
                  source:data,
                  limit:data.length
      });
}
searchautocomplete(".form-control",indicator);

DEMO

在 Bootstrap 3 中向 Wide Searchbar 添加自动完成功能

Add autocomplete to Wide Searchbar in Bootstrap 3

search

navbar

twitter-bootstrap