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']"} %>