In today’s modern web applications auto completion/ auto suggestions are very common right from a small to very large applications, serving up multiple requests simultaneously with quick response from the server is very important to make the user experience better and enjoyable.

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, {‘Content-type’ => ‘text/html’},[‘Hello 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.

So lets look at some code as to how to achieve this. Requirement – User should be authenticated – Respond with json with the result of the query – Handle the response on the client side with javascript.

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

Make a new file app/middleware/auto_completer.rb class AutoCompleter def initialize(app) @app = app end def call(env) @request = Rack::Request.new(env) if env[“PATH_INFO”] == “/autocomplete” session = @request.env[‘rack.session’] params = @request.params if session && session[“user_id”].present? users = User.select(“id, name”).like(params[“q”]) [200, {“Content-Type” => “application/json”}, [users.to_json]] else [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, “AutoCompleter”

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

Expected Response [{“id”:2,”name”:”Harry”},{“id”:4,”name”:”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 = function (ul, item) { label = item.name.replace(new RegExp(“(?![^&;]+;)(?!<[^<>]*)(” + $.ui.autocomplete.escapeRegex(this.term) + “)(?![^<>]*>)(?![^&;]+;)”, “gi”), “$1“); return $(“

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

$( “#autocomplete” ).autocomplete({ source: function(req,res){ $.getJSON(“/autocomplete”, { q : req.term }, res) }, minLength: 1, select: function( event, ui ) { $(“#selected”).append(” Id: ” + ui.item.id + ” Name: ” + 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.

Notice we have used “q” as the name of the query parameter instead of the default “term” parameter.

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