In heutigen modernen Webanwendungen sind automatische Vervollständigung/automatische Vorschläge weit verbreitet, von kleinen bis hin zu sehr großen Anwendungen. Die gleichzeitige Bereitstellung mehrerer Anfragen mit schneller Antwort vom Server ist sehr wichtig, um das Benutzererlebnis besser und angenehmer zu gestalten.

Hier kommt Rack-Middleware ins Spiel.

Was ist Rack-Middleware??

Einfach ausgedrückt ermöglicht uns eine Rack-Middleware, Dinge vor oder nach einer Rack-Anwendung zu erledigen. Rack-Middleware wird mithilfe einer Rack-Anwendung initialisiert und sollte auf eine Aufrufmethode reagieren.

Rack-Middleware kann die Kontrolle darüber hinaus an andere Rack-Middleware übergeben oder einfach mit einem Antwortcode, Inhaltstyp und Text antworten.

1 [200, {'Content-type' => 'text/html'},['Hello Web']]

Wie können Sie dies in einer Rails-Anwendung verwenden??

Schienen Hat bereits einen vordefinierten Satz von Rack-Middlewares für Caching, Sitzungsverwaltung usw., können Sie sich die aktuellen Middlewares ansehen, indem Sie Rake-Middleware ausführen.

Darüber hinaus bietet Rails auch eine großartige Möglichkeit, Ihrer Anwendung Ihre eigene Rack-Middleware hinzuzufügen. Die Verwendung einer Rack-Middleware zur Verarbeitung automatischer Vervollständigungen ist großartig, da Sie dadurch im Vergleich zur Verarbeitung der Anforderung in einem Rails-Controller eine leichte Leistungssteigerung erzielen.

Schauen wir uns also einen Code an, um dies zu erreichen. Anforderung – Benutzer sollte authentifiziert sein – Mit JSON mit dem Ergebnis der Abfrage antworten – Behandeln Sie die Antwort auf der Clientseite mit Javascript.

Ruby Rack Middleware – Erstellen Sie ein Verzeichnis für Middlewares in Ihrer Rails-Anwendung mkdir app/middleware.

Erstellen Sie eine neue Datei 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.

Der obige Code wird mit einer Instanz der Rack-Anwendung initialisiert und dann die Steuerung an die Aufrufmethode übergeben. In der Aufrufmethode prüfen wir, ob der Anforderungspfad mit der automatischen Vervollständigung übereinstimmt. Anschließend überprüfen wir die Sitzung, finden passende Benutzer und geben einen JSON mit einer 200-Antwort zurück.

Wenn die Anfrage nicht mit dem Autocomplete-Anfragepfad übereinstimmt, übergeben wir die Kontrolle an die andere Rack-Middleware. Bearbeiten Sie Ihre config/application.rb, um Rails für die Übernahme der neuen Middleware zu konfigurieren

config.middleware.insert_after ActionDispatch::Session::CookieStore, „AutoCompleter“

Dadurch wird Rails angewiesen, die neue Middleware, die wir erstellt haben, nach der Sitzungs-Middleware einzufügen. Führen Sie den Befehl erneut aus, um zu sehen, dass die neue Middleware danach hinzugefügt wurde

ActionDispatch::Session::CookieStore Rake-Middleware

Starten Sie Ihren Rails-Server und gehen Sie zu localhost:3000/autocomplete?q=h

Erwartete Antwort [{“id“:2“,name“:“Harry“},{“id“:4“,name“:“Harold“}]

Javascript Wir werden das jquery-ui-Plugin für die automatische Vervollständigung verwenden. Fügen Sie jquery-ui in asset/javascript/application.js ein

Fügen Sie JavaScript zu asset/javascript/application.js hinzu, um die Autovervollständigungsanforderung zu stellen

$(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 + “”); } }); });

Der erste Codeteil patcht die _renderItem-Methode im jQuery-ui-Autovervollständigungs-Plugin, um das JSON-Format zu verwenden, das wir vom Server senden.

Der zweite Teil ist ziemlich einfach, indem wir den Aufruf zur automatischen Vervollständigung mit einer HTML-Element-ID im DOM verknüpfen.

Beachten Sie, dass wir „q“ als Namen des Abfrageparameters anstelle des Standardparameters „term“ verwendet haben.

Rails Controller und View

Generieren Sie ein neues Controller-Gerüst, generieren Sie einen Controller-Dash-Index

Bearbeiten Sie eine neue Vorlage dash/index.html.erb

Todo-App

<

p>Automatische Vervollständigung

<?php = text_field_tag :Benutzer-ID, Null, :Ausweis => „Autovervollständigung“ - ?>

Starten Sie den Server und gehen Sie zu http://localhost:3000/dash

Nehmen Sie Kontakt mit uns auf.