Bootstrap Typeahead dans Rails

Question

J'utilise Bootstrap-sass et formtastic dans mon application Rails, et je ne sais pas pourquoi la fonction bootstrap-typeahead ne fonctionne pas.

Forme partielle:

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

application.js manifeste:

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

résultat code source 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;]" 

En fin de compte, je vais devoir customiser typeahead pour obtenir la performance que je veux, mais même ce simple javascript ne fonctionne pas pour une raison quelconque. Je ne peux pas trouver quelque chose de mal avec le code. Quelqu'un pourrait-il m'aider?

MISE À JOUR: Je l'ai essayé de la manière javascript comme suit:

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

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

Et encore, il semble que typeahead ne fonctionne pas. i.e) en tapant "il" ne m'a pas une liste déroulante de ces trois éléments dans le tableau ci-dessus. est-ce que quelqu'un a une idée?

Answer 1

Je pense que vous devez définir html_safe pour:

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

Answer 2

Avez-vous appelé la méthode typeahead() lorsque votre page se charge? Vous devez faire quelque chose comme ça;

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

Vous devez attribuer une classe ou l'identifiant à votre entrée pour lier le typeahead à spécifiquement (Rails a probablement affecté un id automatiquement, je suis en supposant que vous avez omis spécifiquement)

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

modifier:

Ce qui suit a fonctionné pour moi. Il faudra un peu de modification de la partie des rails pour s'adapter à votre situation, mais cela fonctionne définitivement.

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

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