Usando TYPEAHEAD de Twitter Bootstrap en una forma (Formtastic)

¿Cómo se integra un typeahead de arranque de la siguiente manera:Usando TYPEAHEAD de Twitter Bootstrap en una forma (Formtastic)

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

en una forma estándar de la siguiente manera:

<%= 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 %>

Fuente

2012-03-20 David Harbage

No he leído toda su pregunta! He actualizado mi respuesta en consecuencia. –

En su controlador

def index 
    @autocomplete_items = Model.all 
end

En su opinión, al igual que lo ha hecho con una ID adicional para el selector ...

<% 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 %>

Y lo más importante, pasar la variable @autocomplete_items instancia definida en su controlador en una variable de Javascript en su vista:

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

Esto serializar sus datos y que sea utilizable JSON para la función TYPEAHEAD a utilizar.

En cuanto a la TYPEAHEAD, simplemente pase ese objeto (@autocomplete_items) como JSON para el Javascript de este modo:

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

Además hay una Autocomplete gem for Rails 3 que trabajará directamente con sus modelos en lugar de hacer pasar el objeto a tu Javascript Incluso hay un ejemplo de Formtastic en la documentación.

Editar: Parece que no leí toda la pregunta! Lamentablemente, los atributos de datos HTML5 actualmente no son compatibles con Formtastic. Sin embargo, hay un separate branch que incluye soporte para estos atributos.

Aparte de eso siempre hay simplemente pegando con buen ol' HTML/ERB para las características dinámicas como este ...

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

EDIT 2: he acabo de dar cuenta dos cosas. Primero, la forma en que pasaba el objeto JSON a una variable Javascript (ver el ejemplo). En segundo lugar, el ejemplo anterior que usa atributos de datos HTML5 será no que funcionará con el plugin Typeahead de Twitter, pero funcionará con el complemento jQuery UI Autocomplete.

Fuente

2012-03-20 20:38:56

Tal vez sea porque soy algo nuevo en esto, pero parece que no puedo hacer funcionar ni el método que escribiste ni la gema Autocompletar. En cuanto a tu método, ¿dónde coloco ese javascript? Hice un modelo llamado Universidad que solo tiene nombres universitarios, e hice un controlador llamado cities_controller y coloqué el método de índice en eso. Aún así, el typeahead no está funcionando. ¿Ayuda por favor? –

¿Cuál es el error que está recibiendo? ¿Y es el problema con el código de Ruby o el Javascript? –

Me di cuenta de que la forma en que estaba pasando el código JSON al código JavaScript generaría problemas.He seguido adelante y lo solucioné usando el helper 'javascript_tag', y pasé la variable usando ERB. –

lo tengo funcionó como:

controlador

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

y vistas

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

Fuente

2012-05-03 21:28:36 dbKooper

En lugar de '@categories = Category.find (: all,: select => 'name'). Map (&: name)' también puede hacer el más breve '@categories = Category.uniq.pluck (: name)' . – rkallensee

Esto funcionará bien con conjuntos de datos más pequeños, pero si aumentan de tamaño, el tiempo que lleva procesar todos los registros evita que la cabeza de escritura funcione rápidamente. Para un conjunto de datos grande, debe usar una consulta en lugar de devolver todo el json en un fragmento. –

Acepto por bajo conjunto de datos esto será rápido. Para juegos grandes, usar ajax será una mejor opción. Hay varios ejemplos de typeahead ajax. – dbKooper

Respuesta

Cuestiones relacionadas