对Bootstrap 3的Typeahead / Select2支持

时间:2013-12-13 08:47:42

标签: twitter-bootstrap-3 jquery-select2 typeahead.js

我正在构建一个谷歌式文本框,可以自动完成键入的文本。

将typeahead与typeahead.js-bootstrap.css一起使用:

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

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

工作有两个问题

  • 我无法自定义它。每当我进行任何重大的样式更改,或者使用bootstrap的form-control类作为输入元素时:文本框都会完全混乱。

  • 自动完成(“提示”)文本写在输入文本上方,所以我为提示设置的颜色是整个文本的颜色!我尝试给提示一个负z阶,但之后根本没有显示。

我已经尝试使用我的Bootstrap 3模板进行Typeahead和Select2自动完成库,到目前为止,我唯一能够在没有完全破坏布局的情况下开箱即用的工作就是上面的代码

如果有人可以解决这些问题,或者为Bootstrap3推荐一个完整的CSS + JS预先解决方案,我将不胜感激:)

2 个答案:

答案 0 :(得分:1)

它为您提供了使用formatresults自定义外观的完全简便方法。您甚至可以为结果编写完整的html视图。并自定义输入框的外观将一个类应用于搜索框的包装器并覆盖select2呈现的css(加载页面并从浏览器检查该样式的来源)。

http://ivaynberg.github.io/select2/

我用这个进行了全功能的自定义搜索。

答案 1 :(得分:1)

现在有一个可用于select2的分支支持Bootstrap 3.

http://fk.github.io/select2-bootstrap-css/

https://github.com/fk/select2-bootstrap-css#readme