Question

jaki sposób zintegrować wpisywanie znaków z wyprzedzeniem od bootstrap tak:

<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="8" data-source='["University of Pennsylvania","Harvard","Yale","Princeton","Cornell","Brown","Columbia","Dartmouth"]'> 

do standardowego formularza tak:

<%= semantic_form_for(@education) do |f| %> 
<%= render 'shared/error_messages', object: f.object %> 
<div class="field"> 
<%= f.input :college, placeholder: "Update Education" %> 
</div> 
<%= f.submit "Submit", class: "btn btn-large btn-primary" %> 
<% end %> 

Answer 1

W kontrolerze

def index 
    @autocomplete_items = Model.all 
end 

W twoim widoku, tak jak masz z dodatkowym identyfikatorem dla selektora ...

<% semantic_form_for(@education) do |f| %> 
    <%= render 'shared/error_messages', object: f.object %> 
    <div class="field"> 
    <%= f.input :college, placeholder: "Update Education", id: "auto_complete" %> 
    </div> 
    <%= f.submit "Submit", class: "btn btn-large btn-primary" %> 
<% end %> 

A co najważniejsze, przekazać zmienną @autocomplete_items instancji zdefiniowanej w kontrolerze do zmiennej JavaScript w widoku:

<%= javascript_tag "var autocomplete_items = #{ @autocomplete_items.to_json };" %> 

To szeregować swoje dane i uczynić ją użyteczną JSON dla funkcji wpisywanie znaków z wyprzedzeniem posługiwać się.

chodzi o wpisywanie znaków z wyprzedzeniem, po prostu przekazać ten obiekt (@autocomplete_items) jako JSON do JavaScript tak:

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     $('#auto_complete').typeahead({source: autocomplete_items}); 
    }); 
</script> 

Dodatkowo istnieje Autocomplete gem for Rails 3 które pracują bezpośrednio z modeli zamiast przechodząc od obiektu do twój JavaScript. W dokumentacji jest nawet przykład Formtastic.

Edytuj: Wygląda na to, że nie przeczytałem całego twojego pytania! Niestety atrybuty danych HTML5 są obecnie nieobsługiwane w Formtastic. Istnieje jednak separate branch, który zawiera obsługę tych atrybutów.

Poza tym zawsze tylko trzyma się good ol”Kopiuj/ERB dynamicznych funkcji, takich jak ten ...

<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="8" data-source='<%= @autocomplete_items.to_json %>'> 

EDIT 2: Właśnie zauważyłem dwie rzeczy. Po pierwsze jest sposób, w jaki przekazałem obiekt JSON do zmiennej JavaScript (patrz przykład). Po drugie, powyższy przykład wykorzystujący atrybuty danych HTML5 będzie nie współpracować z wtyczką Twittera typu Typeahead, ale będzie działać z wtyczką jQuery UI Autocomplete.

Answer 2

mam to działało jak:

Controller

@categories = Category.find(:all,:select=>'name').map(&:name) 

i widoki

<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="8" data-source='<%= @categories.to_json %>'>