Bootstrap Typeahead in Rails

Question

我在我的Rails应用程序中使用Bootstrap-sass和formtastic，我不确定为什么bootstrap-typeahead功能不起作用。

表格部分：

<%= f.input :tag, :input_html => { :'data-provide' => "typeahead", :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]' } %> 

的application.js清单：

//= require bootstrap-typeahead //typeahead is correctly loaded, checked with firebug 

结果的HTML源代码：

<input :data-minLength="2" data-provide="typeahead" data-source="[&quot;hello&quot;, &quot;hellow&quot;, &quot;heaven&quot;, &quot;helo&quot;, &quot;herr&quot;]" 

最后，我需要自定义typeahead才能获得我想要的性能，但即使这个简单的javascript也无法正常工作。我无法找到任何代码错误。任何人都可以帮我吗？

UPDATE： 我想它在JavaScript的方式如下：

<script> //call typeahead 
$(function() { 
    $('input#type_ahead').typeahead({ 
     'source' : ["hello", "heaven", "heythere"] 
    }); 
}) 
</script> 

<%= f.input :tag_list, :input_html => { :id => "type_ahead" }, %> //input tag 

而且还好像预输入无法工作。即）输入“他”不会让我在上述数组中的这三个项目的下拉列表中。有人有想法吗？

Answer 1

我认为你需要设置html_safe为：

{ :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]'.html_safe } 

Answer 2

你打电话的预输入（）方法时，你的页面加载？你需要做这样的事情;

$(function() { 
    $('input').typeahead(); 
}) 

你需要一个类或ID分配给您的输入预输入特异性结合它（Rails的可能已经自动分配一个ID给它，我假定你已经明确省略吧）

$(function() { 
    $('input#my-tag-field-with-a-cool-typeahead').typeahead(); 
}) 

编辑：

以下为我工作。这将需要对轨道部分进行一些修改以适应您的情况，但这绝对有效。

<script> 
$(function() { 
    $('input#type_ahead').typeahead() 
} 
</script> 

<%= text_field_tag :test_type, '', data: {provide: 'typeahead', source: "['hello','heythere','heaven']"} %>