javascript - example - rails select_tag autocomplete

Función "Sugerir" para cuadros de texto en una aplicación de rieles

Question

Estoy buscando la manera más fácil de cómo implementar la función "Sugerir" para un campo de entrada de texto en una aplicación de Rails. La idea es completar los nombres almacenados en una columna de base de datos, dando al usuario un menú desplegable de posibles coincidencias a medida que escribe.

Gracias por cualquier sugerencia!

Answer 1

Al igual que con la mayoría de las cosas en Rails, hay varias formas de hacerlo. Rails solía incluir un conjunto de ayudantes de autocompletado integrados, pero esa funcionalidad ahora se ha eliminado al complemento auto_complete. Es probable que esta sea la forma más fácil de obtener lo que desea implementar: un simple comando en el controlador, algunas cosas simples en su vista, ta-dah. Para utilizar esta solución, solo tendrá que instalar el complemento en su aplicación; consulte esta página que le informa todo lo que necesita saber para instalarla y comenzar.

Como se señala en otra respuesta, al seguir esta ruta se utilizarán los prototipos y los marcos AJAX scriptaculous que vienen incluidos con Rails. Existen otros frameworks AJAX, notablemente JQuery, que también pueden ayudarlo a lograr esta funcionalidad, pero tendrá más aprendizaje acelerado para usarlos que solo usar el plugin.

Answer 2

Ruby on Rails tiene el marco Prototype disponible. Este marco es utilizado por Script.aculo.us y proporciona un control de autocompletado que puede proporcionar la funcionalidad que está buscando.

Answer 3

También puedes probar este enfoque un poco más manual

# your_view.rhtml

<%= text_field ''contact'', ''name'', :id => ''suggest'' %>
<div id=''dropdown'' style=''display:none; z-index: 100; background: #FFFFFF''></div>

<script>
  new Ajax.Autocompleter(''suggest'', ''dropdown'', "<%= url_for :controller => ''contacts'', :action => ''suggest_name'' %>") 
</script>

# contacts_controller.rb

def suggest_name
  query_string = params[:contact][:name]
  @contacts = Contact.find.all :conditions => [''name ilike ?'', "%#{query_string}%"]
  render :partial => ''name_suggestions''
end

# contacts/_name_suggestions.rhtml

<ul>
<% for contact in @contacts %>
  <li><%= contact.name %></li>
<% end %>
</ul>

Answer 4

Rails hace que la autocompleción con estilo "sugestivo" en campos de texto sea realmente fácil usando el método text_field_with_auto_complete .

En Rails 1.x, este método se creó en ActionView::Helpers::JavaScriptMacrosHelper , pero para Rails 2.x se movió a un complemento independiente .

Digamos que tienes un modelo llamado Post que tiene un campo de texto llamado title . En su opinión, donde normalmente usaría text_field_tag (o f.text_field ), simplemente use text_field_with_auto_complete en text_field_with_auto_complete lugar:

<%= text_field_with_auto_complete :post, :title %>

Además, en PostsController , debe hacer una declaración correspondiente:

class PostsController < ApplicationController
  auto_complete_for :post, :title
end

Lo que ocurre detrás de las escenas es agregar dinámicamente una acción llamada auto_complete_for_[object]_[method] al controlador. En el ejemplo anterior, esta acción se llamará auto_complete_for_post_title .

Vale la pena señalar que la llamada de find utilizada por esta acción generada automáticamente actuará en todos los objetos del modelo, por ejemplo, Post.find(:all, ...) . Si este no es el comportamiento que desea (por ejemplo, si desea restringir la búsqueda a un subconjunto específico de Post basadas en el usuario conectado), entonces debe definir su propia auto_complete_for_[object]_[method] en tu controlador

Answer 5

EDITAR: Dejaré esta respuesta aquí como una especie de punto de referencia teórico, pero parece que la respuesta autocompletadora es más útil para ti :)

Descargo de responsabilidad: aunque trabajo para Google (que claramente tiene elementos de "Sugerir" en varias IU), no he analizado ninguno de los códigos de esta área ni he hablado con nadie sobre el aspecto del lado del cliente.

El lenguaje del lado del servidor es probablemente irrelevante aquí. El bit importante es el AJAX requerido en el lado del cliente.

Sugiero que tengas un temporizador de aproximadamente 1 segundo (experimenta para encontrar un punto óptimo) que se restablece cada vez que el usuario ingresa una tecla en el cuadro de texto y se cancela si el usuario navega fuera del cuadro de texto. Si el temporizador se dispara, haz que ejecute una solicitud AJAX. La solicitud de AJAX contendría lo que el usuario ha tipeado hasta ahora. La respuesta AJAX debe ser la lista de sugerencias y el texto original de la solicitud.

Si, cuando la respuesta AJAX vuelve, el texto en el cuadro de texto sigue siendo el mismo que el campo en la respuesta (es decir, el usuario no ha escrito desde entonces) y si el cuadro de texto aún tiene foco, entonces ofrece un menú desplegable. (Debe haber cientos de páginas de ejemplo sobre comboboxes HTML para hacer este lado de las cosas).

Todo lo que el servidor necesita hacer es responder a la solicitud AJAX realizando la búsqueda y formateando la respuesta de manera apropiada, ¡eso es mucho más fácil que el lado del cliente!

Espero que ayude, disculpe por no tener ningún código de muestra, pero sospecho que es bastante complicado y no soy realmente un desarrollador de JavaScript.