Nelle moderne applicazioni Web di oggi il completamento automatico/i suggerimenti automatici sono molto comuni sia per le applicazioni piccole che per quelle molto grandi, soddisfare più richieste contemporaneamente con una risposta rapida dal server è molto importante per rendere l'esperienza dell'utente migliore e piacevole.

È qui che entra in gioco il middleware rack.

Cos'è il middleware rack?

In termini semplici, un middleware Rack ci consente di eseguire operazioni prima o dopo in un'applicazione rack. Il middleware rack viene inizializzato utilizzando un'applicazione rack e deve rispondere a un metodo di chiamata.

Il middleware rack può inoltre trasferire il controllo ad altro middleware rack o semplicemente rispondere con un codice di risposta, un tipo di contenuto e un corpo.

1 [200, {'Tipo di contenuto' => 'testo/html'},['Ciao Web']]

Come puoi usarlo in un'applicazione Rails?

Rotaie ha già un set predefinito di middleware Rack per la memorizzazione nella cache, la gestione delle sessioni, ecc., puoi esaminare i middleware attuali eseguendo il middleware rake.

Oltre a questo, Rails fornisce anche un ottimo modo per aggiungere il proprio middleware Rack alla tua applicazione. L'utilizzo di un middleware Rack per gestire i completamenti automatici è ottimo, poiché offre un leggero aumento delle prestazioni rispetto alla gestione della richiesta in un controller Rails.

Quindi diamo un'occhiata ad alcuni codici su come ottenere questo risultato. Requisito – L'utente deve essere autenticato – Rispondere con json con il risultato della query – Gestire la risposta lato client con javascript.

Ruby Rack Middleware: crea una directory per i middleware nella tua applicazione rails mkdir app/middleware.

Crea un nuovo file app/middleware/auto_completer.rb class AutoCompleter def inizializza(app) @app = app end def call(env) @request = Rack::Request.new(env) if env[“PATH_INFO”] == “ /autocomplete” sessione = @request.env['rack.session'] params = @request.params se sessione && session[“user_id”].presente? users = User.select("id, name").like(params["q"]) [200, {"Content-Type" => "application/json"}, [users.to_json]] else [404, {"Tipo di contenuto" => "testo/html"}, ["Non trovato"]] end else @app.call(env) end end end.

Il codice precedente viene inizializzato con un'istanza dell'applicazione rack, quindi passa il controllo al metodo di chiamata. Nel metodo di chiamata controlliamo se il percorso della richiesta corrisponde al completamento automatico, quindi controlliamo la sessione e troviamo gli utenti corrispondenti e restituiamo un json con una risposta 200.

Se la richiesta non corrisponde al percorso della richiesta di completamento automatico, trasferiamo il controllo all'altro middleware del rack. Modifica il tuo config/application.rb per configurare Rails per adottare il nuovo middleware

config.middleware.insert_after ActionDispatch::Session::CookieStore, “Completer automatico”

Questo dice a Rails di inserire il nuovo middleware che abbiamo creato dopo il middleware della sessione. Esegui di nuovo il comando per vedere il nuovo middleware aggiunto dopo

Middleware rake ActionDispatch::Session::CookieStore

Avvia il tuo server Rails e vai su localhost:3000/autocomplete?q=h

Risposta prevista [{“id”:2,”name”:”Harry”},{“id”:4,”name”:”Harold”}]

Javascript Utilizzeremo il plugin jquery-ui per il completamento automatico. Includi jquery-ui in asset/javascript/application.js

Aggiungi JavaScript a asset/javascript/application.js per effettuare la richiesta di completamento automatico

$(function() { $.ui.autocomplete.prototype._renderItem = function (ul, item) { label = item.name.replace(new RegExp(“(?![^&;]+;)(?!< [^<>]*)(” + $.ui.autocomplete.escapeRegex(this.term) + “)(?![^<>]*>)(?![^&;]+;)”, “ gi”), “$1“); restituire $(“

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

$( “#autocomplete” ).autocomplete({ source: function(req,res){ $.getJSON(“/autocomplete”, { q : req.term }, res) }, minLength: 1, select: function( event, ui ) { $(“#selezionato”).append(” Id: ” + ui.item.id + ” Nome: ” + ui.item.name + “”); } }); });

La prima parte di codice patcha il metodo _renderItem nel plugin di completamento automatico jQuery-ui per utilizzare il formato json che stiamo inviando dal server.

La seconda parte è piuttosto semplice in cui colleghiamo la chiamata di completamento automatico a un ID di elemento html nel DOM.

Nota che abbiamo utilizzato "q" come nome del parametro di query invece del parametro "term" predefinito.

Controller e vista delle rotaie

Genera un nuovo controller, i binari dell'impalcatura generano l'indice del trattino del controller

Modifica un nuovo modello dash/index.html.erb

Applicazione Todo

<

p>Completamento automatico

<?php = text_field_tag :ID utente, zero, :id => "completamento automatico" - ?>

Avvia il server e vai a http://localhost:3000/dash