En las aplicaciones web modernas de hoy en día, la finalización automática y las sugerencias automáticas son muy comunes, desde aplicaciones pequeñas hasta aplicaciones muy grandes, atender múltiples solicitudes simultáneamente con una respuesta rápida del servidor es muy importante para que la experiencia del usuario sea mejor y más agradable.

Aquí es donde entra en escena el middleware de rack.

¿Qué es el middleware en rack??

En términos simples, un middleware Rack nos permite hacer cosas antes o después en una aplicación rack. El middleware de rack se inicializa mediante una aplicación de rack y debe responder a un método de llamada.

El middleware de rack puede además ceder el control a otro middleware de rack o simplemente responder con un código de respuesta, tipo de contenido y cuerpo.

1 [200, {'Tipo de contenido' => 'texto/html'},['Hola Web']]

¿Cómo puedes usar esto en una aplicación Rails??

Rieles ya tiene un conjunto predefinido de middlewares Rack para almacenamiento en caché, manejo de sesiones, etc., puede ver los middlewares actuales ejecutando rake middleware.

Aparte de esto, Rails también proporciona una excelente manera de agregar su propio middleware Rack a su aplicación. Usar un middleware Rack para manejar las funciones de autocompletar es fantástico, ya que proporciona un ligero aumento de rendimiento en comparación con manejar la solicitud en un controlador Rails.

Entonces, veamos algo de código sobre cómo lograr esto. Requisito – El usuario debe estar autenticado – Responder con json con el resultado de la consulta – Manejar la respuesta del lado del cliente con javascript.

Ruby Rack Middleware: cree un directorio para middlewares en su aplicación Rails mkdir app/middleware.

Crear un nuevo archivo app/middleware/auto_completer.rb clase AutoCompleter def inicializar(aplicación) @app = app end def call(env) @request = Rack::Request.new(env) if env[“PATH_INFO”] == “ /autocompletar” sesión = @request.env['rack.session'] params = @request.params si sesión && sesión[“user_id”].presente? usuarios = Usuario.select(“id, nombre”).like(params[“q”]) [200, {“Tipo de contenido” => “aplicación/json”}, [usuarios.to_json]] más [404, {“Content-Type” => “text/html”}, [“Not Found”]] end else @app.call(env) end end end.

El código anterior se inicializa con una instancia de la aplicación rack y luego se entrega el control al método de llamada. En el método de llamada, verificamos si la ruta de la solicitud coincide con el autocompletado. Luego verificamos la sesión, encontramos usuarios coincidentes y devolvemos un json con una respuesta 200.

Si la solicitud no coincide con la ruta de solicitud de autocompletar, entregamos el control al otro middleware del rack. Edite su config/application.rb para configurar Rails para que elija el nuevo middleware

config.middleware.insert_after ActionDispatch::Session::CookieStore, “Autocompletador”

Esto le dice a Rails que inserte el nuevo middleware que hemos creado después del middleware de sesión. Ejecute el comando nuevamente para ver que el nuevo middleware se agregó después

ActionDispatch::Session::CookieStore middleware rake

Inicie su servidor Rails y vaya a localhost:3000/autocomplete?q=h

Respuesta esperada [{“id”:2”,nombre”:”Harry”},{“id”:4”,nombre”:”Harold”}]

Javascript Usaremos el complemento jquery-ui para el autocompletado. Incluya jquery-ui en activos/javascript/application.js

Agregue JavaScript a activos/javascript/application.js para realizar la solicitud de autocompletar

$(function() { $.ui.autocomplete.prototype._renderItem = función (ul, artículo) { etiqueta = item.name.replace(new RegExp(“(?![^&;]+;)(?!< [^<>]*)(” + $.ui.autocomplete.escapeRegex(este.término) + “)(?![^<>]*>)(?![^&;]+;)”, “ gi”), “$1“); devolver $(“

• “) .data(“item.autocomplete”, item) .append(“” + etiqueta + “”) .appendTo(ul); };

$( “#autocomplete”).autocomplete({ fuente: función(req,res){ $.getJSON(“/autocomplete”, { q : req.term }, res) }, minLength: 1, seleccione: función( evento, ui ) { $(“#selected”).append(” Id: ” + ui.item.id + ” Nombre: ” + ui.item.name + “”); } }); });

El primer fragmento de código parchea el método _renderItem en el complemento de autocompletar jQuery-ui para usar el formato json que enviamos desde el servidor.

La segunda parte es bastante sencilla, donde conectamos la llamada de autocompletar a una identificación de elemento html en el DOM.

Observe que hemos utilizado "q" como nombre del parámetro de consulta en lugar del parámetro predeterminado "término".

Controlador de rieles y vista

Generar un nuevo controlador. Los rieles del andamio generan un índice del tablero del controlador.

Editar una nueva plantilla dash/index.html.erb

Aplicación Todo

<

p>Autocompletar

<?php = etiqueta_campo_texto :ID_usuario, nulo, :identificación => "autocompletar" - ?>

Inicie el servidor y vaya http://localhost:3000/dash

Póngase en contacto con nosotros.