[RUBY] Recherche intemporelle avec Rails + JavaScript (jQuery)

Fonction de recherche gérée dans les articles

C'est une fonction de recherche comme celle-ci. Cette fois, nous allons extraire la colonne nommée nom de la table appelée shops et l'afficher dans la vue.

• Plusieurs informations de magasin ont été enregistrées. Recherchez n'importe quel magasin à partir de là dans n'importe quelle colonne.

• Faites-le de manière asynchrone
• Recherchez et dessinez à chaque fois que vous tapez un caractère --Cliquez sur le résultat de la recherche pour créer un lien vers la page correspondante

Probablement, je pense que le niveau de connaissance et le niveau de bon sens dans la programmation pour les débutants sont bien inférieurs à ceux que pensent les personnes expérimentées. Donc, je pense que j'écrirai autant que je peux, "Est-il nécessaire d'expliquer une telle chose?"

Environnement de développement

mac Ruby 2.5.1 Rails 5.2.3 jQuery

Fichiers requis

Tout d'abord, les fichiers nécessaires à la mise en œuvre sont résumés ci-dessous.

• Préparation du ** contrôleur ** qui définit les actions de recherche

app/controllers/shops_controller.rb

 def search
 end

--Préparation de ** json.jbuilder ** correspondant à l'action ci-dessus

ruby:views/shops/search.json.jbuilder

#Faites attention aux relations de répertoire et aux noms de fichiers pour qu'ils correspondent au contrôleur et à l'action créés ci-dessus
#Dans ce cas, les vues/shops(Correspond au nom du contrôleur)/search(Correspond au nom de l'action).json.jbuilder

--Préparation du ** routage ** pour les actions ci-dessus

config/route.rb

resources :shops do #dans le contrôleur des magasins
 collection do
  get 'search'      #action de recherche
 end
end

--Préparation d'un fichier ** view ** pour afficher le formulaire de recherche et les résultats

ruby:app/views/shops/index.html.haml

#Cette fois, la recherche est affichée sur l'écran de la liste des magasins.
#J'écrirai en utilisant haml, mais cela peut être du html normal ou slim.

• ** js ** Préparation du fichier

app/assets/javascripts/search.js

#.N'importe quel nom peut être utilisé tant qu'il se termine par js

Comme mentionné ci-dessus, nous implémenterons la fonction de recherche en utilisant cinq fichiers.

Comment ça marche?

Le déroulement du processus de recherche est le suivant.

Recevez l'événement qui s'est produit dans le formulaire de recherche sous forme de fichier .js.

○○.html.haml(○○.html.erb)　→　○○.js

Envoyez les informations reçues au contrôleur au format json.

○○.js　→　○○_controller

Le contrôleur extrait les informations nécessaires de la base de données et les convertit avec jbuilder afin qu'elles puissent être utilisées dans .js.

○○_controller　→　○○.json.jbuilder

Envoyez-le à nouveau du côté js et dessinez-le en html.

○○.json.jbuilder　→　○○.js　→　○○.html.haml

Si vous ne connaissez pas le déroulement du processus, vous ne pouvez pas gérer une erreur et vous perdrez une heure ou deux. J'expliquerai autant que possible dans le code que j'écrirai, alors veuillez le lire en gardant à l'esprit le flux de traitement ci-dessus.

Commençons.

Faire le routage

Cette fois, à titre d'exemple, définissez l'action ** search ** dans ** shops_controller **.

app/controllers/shops_controller.rb

 def search
 end

config/route.rb

resources :shops do #dans le contrôleur des magasins
 collection do
  get 'search'      #action de recherche
 end
end

Préparation du formulaire de recherche et du champ d'affichage des résultats

ruby:app/views/shops/index.html.haml

.search-field
 .fas.fa-search  #J'utilise une police de loupe géniale.
 .shop_search
   = f.text_field :text, placeholder: "Recherche par magasin / adresse", id: "shop_search"  #Un champ de saisie de texte est configuré.
 #shop_search--résultat ← magasiner au lieu de commenter_search--Le nom de l'id est result. Afficher les résultats de la recherche.
   .shop-search-list

Recevoir les informations saisies dans le formulaire de recherche et envoyer les informations reçues au responsable du traitement

app/assets/javascripts/search.js

$("#shop_search").on("keyup", function(){
  let input = $("#shop_search").val();
  $.ajax({
   type: 'GET',
   url: '/shops/search',
   data: {keyword: input},
   dataType: 'json'
  })

Tout d'abord, vous recevrez les informations saisies dans le formulaire de recherche (f.text_field dans le fichier haml) sous forme de fichier js. ┗ Spécifiez le nom d'identifiant donné au formulaire de recherche et obtenez les informations avec la touche vers le haut au moment où vous prononcez votre doigt sur le clavier lors de la saisie de caractères.

Les informations ci-dessous ajax ·Comment ·où ·quoi ・ Dans quel état Spécifiez s'il faut envoyer.

Dans ce cas, je pense que la méthode GET enverra l'entrée à l'action de recherche dans le contrôleur de boutiques dans la méthode json.

Décrire les paramètres d'action et les interactions avec DB sur le contrôleur

app/controllers/shops_controller.rb

  def search
    return nil if params[:keyword] == ""
    @shops = Shop.where('name LIKE ? OR location LIKE ?', "%#{params[:keyword]}%", "%#{params[:keyword]}%").limit(10)
    respond_to do |format|
      format.html
      format.json
    end
  end

Cette fois, j'ai défini la colonne du nom (nom du magasin) et la colonne de l'emplacement (emplacement) lors de la création de la table des boutiques, je l'ai donc définie pour que je puisse rechercher avec ces deux informations, Par exemple, si vous souhaitez rechercher uniquement par nom de magasin

app/controllers/shops_controller.rb

  def search
    return nil if params[:keyword] == ""
    @shops = Shop.where('name LIKE ?, "%#{params[:keyword]}%").limit(10)
    respond_to do |format|
      format.html
      format.json
    end
  end

Est OK.

** params [: keyword] ** dans l'action provient des données: {mot-clé: entrée} sous ajax dans le fichier js précédent. Cela peut être difficile à comprendre, mais cela signifie que les caractères saisis dans le champ de recherche sont traités comme des entrées dans le fichier js et comme des mots-clés dans le fichier du contrôleur. Si rien n'est entré dans le champ de recherche (deuxième ligne ""), nil est renvoyé.

De plus, à la 3ème ligne, la table des boutiques extrait les informations de la base de données en fonction de ce mot-clé (caractère saisi dans le champ de recherche). Cette fois, il s'agit d'une spécification pour effectuer une recherche de correspondance partielle en insérant la quantité fin de paramètres [: mot-clé] dans **% **. Pour d'autres méthodes de recherche, veuillez consulter cet article.

• Rails - Recherche floue de caractères à l'aide de la clause LIKE (lorsque vous souhaitez rechercher des mots contenant des caractères spécifiques) J'ai également évoqué cet article. Merci beaucoup.

Et comme les données de caractères saisies cette fois sont dans le contrôleur au format json, elles passent à jbuilder.

Conversion d'informations avec json.jbuilder

ruby:search.json.jbuilder

json.array! @shops do |shop|
  json.name           shop.name
  json.location       shop.location
end

J'ai extrait les informations de la base de données dans le contrôleur, mais je dois convertir ces données au format json. Faites cela avec jbuilder.

Dessiner les résultats de la recherche dans des fichiers html

Tout d'abord, ajoutez le traitement lorsque le traitement par le contrôleur est terminé et renvoyé sous le fichier js ajax.

app/assets/javascripts/search.js

  $("#shop_search").on("keyup", function(){
    let input = $("#shop_search").val();
    $.ajax({
      type: 'GET',
      url: '/shops/search',
      data: {keyword: input},
      dataType: 'json'
    })
    .done(function(shops){
      $("#shop_search--result").empty();
      if (shops.length !== 0) {
        shops.forEach(function(shop){
          addShop(shop);
        });
      } 
      else if (input.length == 0){
        return false;
      } else {
        addNoShop();
      }
    });
  });

Ci-dessous .done est le processus.

Ensuite, addShop et addNoShop sont dessinés en html.

Vous trouverez ci-dessous le fichier js complet.

app/assets/javascripts/search.js

$(function(){
  function addShop(shop) {
    let html = `
      <a href="/shops/${shop.id} class="shop_search-list">
        <div>${shop.name} - ${shop.location}</div>
      </a>
      `;
      $("#shop_search--result").append(html);
  };
  function addNoShop(){
    let html =`Il n'y a pas de boutique`
    $("#shop_search--result").append(html);
  };
  $("#shop_search").on("keyup", function(){
    let input = $("#shop_search").val();
    $.ajax({
      type: 'GET',
      url: '/shops/search',
      data: {keyword: input},
      dataType: 'json'
    })
    .done(function(shops){
      $("#shop_search--result").empty();

      if (shops.length !== 0) {
        shops.forEach(function(shop){
          addShop(shop);
        });
      } 
      else if (input.length == 0){
        return false;
      } else {
        addNoShop();
      }
    })
  });
});

Spécifiez la norme lors du dessin comme let html. Cette fois, j'ai essayé de le décrire sous la forme d'un lien vers la page de détail en cliquant sur le résultat de la recherche.

Insérez la phrase fixe (html) créée avec append à l'endroit (# shop_search - result) où les résultats de la recherche sont affichés dans le fichier haml.

Ceci termine la fonction de recherche asynchrone (recherche incrémentielle).

Essayez-le

Ce contenu a été créé tout en approfondissant la compréhension en remettant en question le contenu appris à l'école par moi-même. Au début de l'étude, j'espérais pouvoir le faire avec une compréhension à demi enthousiaste, mais quand j'ai commencé à partir de 1 seul, j'ai souvent arrêté de travailler. C'est une réflexion.

Je pense qu'il s'agit de comprendre où et comment chaque fois que le fichier change. De plus, comme pour toute fonction, dans ce cas, il est fortement recommandé de continuer à écrire pendant le débogage tel que console.log.