2013-12-13 67 views
1

我正在构建一个可自动完成键入文本的Google风格文本框。Bootstrap 3的Typeahead/Select2支持

使用预输入与typeahead.js-bootstrap.css

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

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

工作但有两个问题

  • 我不能自定义。每当我做出任何重大的样式更改,或者使用引导类的输入元素:文本框完全搞砸了。

  • 自动完成(“提示”)文本被写在输入文本的上方,所以我为提示设置的颜色就是整个文本的颜色!我试图给出一个负Z顺序的提示,但它根本没有显示出来。

我试过和事先键入的内容自动选择二,完成库与我的引导3模板,到目前为止,我能够工作外的开箱不彻底毁掉布局的唯一的事情就是以上代码

如果有人能解决这些问题,否则建议一个完整的CSS + JS预输入解决方案Bootstrap3,我会很感激:)

+3

虽然支持已被删除,你可以使用“旧”插件看到:HTTP:// github上的.com/bassjobsen /引导-3-事先键入的内容。要解决您的CSS问题,请参阅:http://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3和http://stackoverflow.com/questions/18059161/css-问题在Twitter的typeahead-with-bootstrap-3 –

+0

看起来这正是我需要的!谢谢! – Nimo

回答

1

它可以让你完全简单的方法来定制与formatresults外观。你甚至可以为你的结果写完整的HTML视图。并自定义输入框的外观应用一个类到您的搜索框的包装,并覆盖select2呈现的CSS(加载页面并从浏览器检查该风格来自哪里)。

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

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

+0

我实际上在问如何让它开始工作**开箱即用**。不想混淆添加我自己的CSS类。 – Nimo