I dagens moderna webbapplikationer är automatisk komplettering/ autoförslag mycket vanliga från små till mycket stora applikationer, att servera flera förfrågningar samtidigt med snabb respons från servern är mycket viktigt för att göra användarupplevelsen bättre och njutbar.

Här kommer rackmellanvara i bilden.

Vad är Rack Middleware?

Enkelt uttryckt låter en Rack-mellanvara oss göra saker före eller efter i en rackapplikation. Rackmellanvara initieras med en rackapplikation och bör svara på en anropsmetod.

Rackmellanvara kan vidare lämna över kontrollen till annan rackmellanvara eller bara svara tillbaka med en svarskod, innehållstyp och text.

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

Hur kan du använda detta i en Rails-applikation?

Räls har redan en fördefinierad uppsättning rackmellanvaror för cachning, sessionshantering etc, du kan titta på aktuell mellanvara genom att köra rakemellanvara.

Bortsett från detta ger Rails också ett utmärkt sätt att lägga till din egen Rack-mellanvara till din applikation. Att använda en Rack-mellanvara för att hantera automatiska kompletteringar är bra, eftersom det ger dig en liten prestandaökning jämfört med att hantera begäran i en Rails-kontroller.

Så låt oss titta på lite kod för hur man uppnår detta. Krav – Användaren ska vara autentiserad – Svara med json med resultatet av frågan – Hantera svaret på klientsidan med javascript.

Ruby Rack Middleware-Skapa en katalog för middlewares i din rails-applikation mkdir app/middleware.

Skapa en ny fil 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 om 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.

Ovanstående kod initieras med en instans av rackapplikation, varefter kontrollen överlämnas till anropsmetoden. I anropsmetoden kontrollerar vi om sökvägen för begäran matchar autocomplete. Vi kontrollerar sedan sessionen och hittar matchande användare och returnerar en json med ett 200-svar.

Om begäran inte stämmer överens med autcomplete request-sökvägen lämnar vi över kontrollen till den andra rackmellanvaran. Redigera din config/application.rb för att konfigurera Rails för att hämta den nya mellanvaran

config.middleware.insert_after ActionDispatch::Session::CookieStore, "AutoCompleter"

Detta säger åt rails att infoga den nya mellanvaran vi har gjort efter sessionens mellanvara. Kör kommandot igen för att se att du kan se att den nya mellanvaran lades till efter

ActionDispatch::Session::CookieStore rake-mellanvara

Starta din Rails-server och gå till localhost:3000/autocomplete?q=h

Förväntat svar [{“id”:2,”name”:”Harry”},{“id”:4,”name”:”Harold”}]

Javascript Vi kommer att använda jquery-ui plugin för autokomplettering. Inkludera jquery-ui i assets/javascript/application.js

Lägg till JavaScript i assets/javascript/application.js för att göra begäran om autoslutförande

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

• “) .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 + ” Namn: ” + ui.item.name + “”); } }); });

Den första kodbiten korrigerar metoden _renderItem i jQuery-ui auto complete plugin för att använda json-formatet vi skickar från servern.

Den andra delen är ganska okomplicerad där vi kopplar det automatiska kompletteringsanropet till ett html-element-id i DOM.

Observera att vi har använt "q" som namn på frågeparametern istället för standardparametern "term".

Rails Controller och View

Generera en ny styrställningsställning skenor genererar styrenhetsindex

Redigera en ny mall dash/index.html.erb

Todo-appen

<

p>Autoslutförande

<?php = text_field_tag :användar ID, noll, :id => "autoslutförande" - ?>

Starta servern och gå http://localhost:3000/dash