Dans les applications Web modernes d'aujourd'hui, la saisie semi-automatique/les suggestions automatiques sont très courantes, qu'il s'agisse d'applications petites ou très grandes, il est très important de répondre simultanément à plusieurs requêtes avec une réponse rapide du serveur pour rendre l'expérience utilisateur meilleure et plus agréable.

C’est ici qu’intervient le middleware de rack.

Qu'est-ce que le middleware rackable ??

En termes simples, un middleware Rack nous permet de faire des choses avant ou après dans une application rack. Le middleware rack est initialisé à l’aide d’une application rack et doit répondre à une méthode d’appel.

Le middleware de rack peut en outre confier le contrôle à un autre middleware de rack ou simplement répondre avec un code de réponse, un type de contenu et un corps.

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

Comment pouvez-vous l'utiliser dans une application Rails?

Des rails dispose déjà d'un ensemble prédéfini de middlewares Rack pour la mise en cache, la gestion des sessions, etc., vous pouvez consulter les middlewares actuels en exécutant le middleware rake.

En dehors de cela, Rails constitue également un excellent moyen d'ajouter votre propre middleware Rack à votre application. L'utilisation d'un middleware Rack pour gérer la saisie semi-automatique est excellente, car elle vous donne une légère amélioration des performances par rapport à la gestion de la requête dans un contrôleur Rails.

Examinons donc un peu de code pour savoir comment y parvenir. Exigence – L'utilisateur doit être authentifié – Répondre avec json avec le résultat de la requête – Gérer la réponse côté client avec javascript.

Ruby Rack Middleware - Créez un répertoire pour les middlewares dans votre application rails mkdir app/middleware.

Créer un nouveau fichier 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.

Le code ci-dessus est initialisé avec une instance d'application rack, puis transmet le contrôle à la méthode d'appel. Dans la méthode d'appel, nous vérifions si le chemin de la requête correspond à la saisie semi-automatique. Nous vérifions ensuite la session, trouvons les utilisateurs correspondants et renvoyons un json avec une réponse 200.

Si la requête ne correspond pas au chemin de la requête de saisie semi-automatique, nous passons le contrôle à l'autre middleware du rack. Modifiez votre config/application.rb pour configurer Rails afin qu'il récupère le nouveau middleware

config.middleware.insert_after ActionDispatch :: Session :: CookieStore, « AutoCompleter »

Cela indique à Rails d'insérer le nouveau middleware que nous avons créé après le middleware de session. Exécutez à nouveau la commande pour voir que le nouveau middleware a été ajouté après

ActionDispatch :: Session :: Middleware de râteau CookieStore

Démarrez votre serveur Rails et accédez à localhost:3000/autocomplete?q=h

Réponse attendue [{"id":2,"name":"Harry"},{"id":4,"name":"Harold"}]

Javascript Nous utiliserons le plugin jquery-ui pour la saisie semi-automatique. Inclure jquery-ui dans actifs/javascript/application.js

Ajoutez JavaScript à assets/javascript/application.js pour effectuer la demande de saisie semi-automatique

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

• ") .data("item.autocomplete", item) .append("" + étiquette + "") .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 + ” Nom : ” + ui.item.name + “”); } }); });

Le premier morceau de code corrige la méthode _renderItem dans le plugin de saisie semi-automatique jQuery-ui pour utiliser le format json que nous envoyons depuis le serveur.

La deuxième partie est assez simple : nous connectons l'appel de saisie semi-automatique à un identifiant d'élément HTML dans le DOM.

Notez que nous avons utilisé « q » comme nom du paramètre de requête au lieu du paramètre « term » par défaut.

Contrôleur et vue Rails

Générer un nouveau contrôleur, les rails d'échafaudage génèrent un index de tableau de bord du contrôleur

Modifier un nouveau modèle dash/index.html.erb

Application Todo

<

p>Saisie automatique

<?php = text_field_tag :ID de l'utilisateur, néant, :identifiant => "Saisie automatique" - ?>

Démarrez le serveur et allez http://localhost:3000/dash

Prenez contact avec nous.