Twitter bootstrap 3 提前键入/选择2支持引导3

我正在构建一个谷歌风格的文本框，自动完成键入的文本

将typeahead与以下内容一起使用：

$（文档）.ready（函数（）{
$（'#op1'）。请提前键入({
远程：'/search/%QUERY'，
});
});

它起作用了，但有两个问题：

• 我无法自定义它。每当我对输入元素进行任何重大的样式更改，或使用bootstrap的

  表单控件

  类时：文本框就会完全混乱

• 自动完成的（“提示”）文本写在键入的文本之上，因此我为提示设置的任何颜色都是整个文本的颜色！我试着给这个提示一个负的z顺序，但是它根本没有显示出来

我已经尝试了Typeahead，并用我的Bootstrap3模板选择了2个自动完成库，到目前为止，我唯一能够在不完全破坏布局的情况下开箱操作的就是上面的代码

---

如果有人能解决这些问题，或者为Bootstrap3推荐一个完整的CSS+JS typeahead解决方案，我将不胜感激：）

它为您提供了一种完全简单的方法，可以使用formatresults定制外观。您甚至可以为结果编写完整的html视图。要自定义输入框的外观，请在搜索框的包装上应用一个类，并覆盖select2呈现的css（加载页面并从浏览器中检查样式的来源）

---

我用这个做了一个全功能的定制搜索。

现在有一个fork可用于select2，它支持bootstrap3

---

尽管支持已被取消，但您可以使用“旧”插件，请参见：。要解决您的CSS问题，请参阅：看起来这正是我需要的！谢谢我其实是在问如何让它开箱即用。我不想在添加我自己的CSS类时搞砸。

$(document).ready(function() {
   $('#op1').typeahead({
      remote: '/search/%QUERY',
   });
});

<input type="text" id="op1">