2

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;]"

最後に、必要なパフォーマンスを得るために先行入力をカスタマイズする必要がありますが、この単純な JavaScript でさえ何らかの理由で機能しません。コードに問題が見つかりません。誰でも私を助けることができますか？

更新： 次のように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

それでも、先行入力が機能しないようです。つまり、「彼」と入力しても、上記の配列の 3 つの項目のドロップダウンが表示されません。誰にもアイデアはありますか？

4

2 に答える 2

0

次のように設定する必要があると思いますhtml_safe：

{ :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]'.html_safe }
于 2012-12-30T03:25:05.947 に答える
0

ページの読み込み時に typehead() メソッドを呼び出しましたか? このようなことをする必要があります。

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

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']"} %>
于 2012-12-30T09:41:02.763 に答える