ruby-on-rails - easy - rails select_tag autocomplete

En Rails, ¿cuál es la mejor forma de obtener Autocompletar que muestra nombres pero usa IDs?

Question

Quiero tener un cuadro de texto que el usuario pueda escribir que muestre una lista poblada por Ajax de los nombres de mi modelo y luego, cuando el usuario seleccione uno, quiero que el HTML guarde el ID del modelo y lo use cuando se envíe el formulario .

He estado hurgando en el complemento auto_complete que se eliminó en Rails 2, pero parece no tener idea de que esto podría ser útil. Hay un episodio de Railscast que cubre el uso de ese complemento, pero no toca este tema. Los comentarios señalan que podría ser un problema y apuntan a model_auto_completer como una posible solución , que parece funcionar si los elementos vistos son cadenas simples, pero el texto insertado incluye muchos espacios basura si (como me gustaría hacer) incluye una imagen en los elementos de la lista, a pesar de lo que dice la documentación .

Probablemente podría hackear model_auto_completer en forma, y ​​todavía puedo terminar haciéndolo, pero estoy ansioso por descubrir si hay mejores opciones.

Answer 1

Tengo una solución trillada para los espacios basura de la imagen. :after_update_element => "trimSelectedItem" un :after_update_element => "trimSelectedItem" al hash de opciones del model_auto_completer (ese es el primer hash de los tres dados). Mi trimSelectedItem luego encuentra el subelemento apropiado y usa el contenido de eso para el valor del elemento:

function trimSelectedItem(element, value, hiddenField, modelID) {
var span = value.down(''span.display-text'')
console.log(span)
var text = span.innerText || span.textContent
console.log(text)
element.value = text
}

Sin embargo, esto :allow_free_text opción :allow_free_text , que por defecto cambia el texto tan pronto como el cuadro de texto pierde el foco si el texto interno no es un elemento "válido" de la lista. Así que tuve que apagarlo también, pasando :allow_free_text => true en el hash de opciones (de nuevo, el primer hash). Realmente preferiría que permaneciera encendida, sin embargo.

Entonces mi llamada actual para crear el autocompletador es:

<%= model_auto_completer(
"line_items_info[][name]", "",
"line_items_info[][id]", "",
{:url => formatted_products_path(:js),
:after_update_element => "trimSelectedItem",
:allow_free_text => true},
{:class => ''product-selector''},
{:method => ''GET'', :param_name => ''q''}) %>

Y los productos / index.js.erb es:

 <ul class=''products''>
<%- for product in @products -%>
<li id="<%= dom_id(product) %>">
<%= image_tag image_product_path(product), :alt => "" %>
<span class=''display-text''><%=h product.name %></span>
</li>
<%- end -%>
</ul>

Answer 2

Yo rodé el mío. El proceso es un poco intrincado, pero ...

Acabo de hacer un text_field en el formulario con un observador. Cuando comienza a escribir en el campo de texto, el observador envía la cadena de búsqueda y el controlador devuelve una lista de objetos (un máximo de 10).

Los objetos se envían a renderizar a través de un parcial que completa los resultados de búsqueda de autocompletado dinámico. El parcial realmente rellena las líneas link_to_remote que se vuelven a enviar al controlador. El link_to_remote envía el ID de la selección del usuario y luego un poco de RJS limpia la búsqueda, completa el nombre en el campo de texto y luego coloca el id seleccionado en un campo de formulario oculto.

Phew ... No pude encontrar un complemento para hacer esto en ese momento, así que rodé el mío, espero que todo eso tenga sentido.