在Bootstrap 3中将自动完成添加到宽搜索栏

Question

过去几天我一直在考虑一个非常简单的任务：在Bootstrap 3中为搜索栏设置自动完成功能。我想要实现的是将其集成到Bootstrap 3设计中而不会破坏布局。

我已经研究过使用twitter-typeahead.js和bootstrap3-typeahead的方法..

部分困难可能是我希望将大型搜索框作为“navbar-fixed”元素的一部分，我使用此解决方案/解决方法：

https://stackoverflow.com/questions/18552714/bootstrap-3-how-to-maximize-input-width-inside-navbar

我遇到的挑战是，每当我包含typeahead类时，搜索栏的样式会更改为不同的css样式，从而打破布局。然后我尝试使用autocomplete.js。

此时自动完成功能的实际级别非常简单，我只想匹配确切的字符串，所以我不关心确切的实现 - 我唯一的要求是：（1）Typeahead / autocomplete和（2）Keep 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