Implement search function with Rakuten Books (DVD) API

Introduction

We are currently developing a movie search service and have implemented asynchronous communication using rails and ajax. After a few days of addiction, I've finally implemented it, so I'll keep a record of it. I touched jquery a little when I made movements such as hamburger buttons, but it was my first time to touch Ajax and I got stuck for a few days. (There was also a relationship that the code was not reflected because the server was not restarted.)

environment

-rails (5.2.4.1) -ruby (2.5.3)

__ If you want to implement Rakuten API__ (in case of Rails), please install gem. The mounting procedure is omitted. For more information, click here __](https://github.com/rakuten-ws/rws-ruby-sdk/blob/master/README.ja.md)

Controller processing specification

First of all, specify the action in posts_contriller to process the contents entered in the search field.

routes.rb

get 'search', to: 'posts#search'　#Execute search action when searching for a keyword

Search, view of search result display

Search form

erb:search_from.html.erb

#abridgement
 <div class='content'>
  <div id="search-box">
    #url: search_GET search action with path
    <%= form_with(url: search_path, method: :get) do |f| %> 
      <%= f.text_area :title, id: :title, placeholder: "Type in the keyword", style: "width: 200px;"%> #:Search word is hit in title
      <%= f.submit "Search", id: "search_button"%> #Searchワード記入ご自動SearchかSearchボタン後にSearchどちらでも
    <%end%>
  </div>
  <h2>search results</h2>
  <div id='item_list'> 
    #You can return the render partial with, but after ajax processing item_list.html.I am trying to display erb.
  </div>
</div>

Search result view

erb:item_list.html.erb

<% items.each do |item| %>
  <% if item[:title].present? %>
    <div class="item">
      <div class= "item-image">
        <%= image_tag(item[:imageUrl], width: '55px') %>
      </div>
      <div class= "item-title">
        <p><%= item[:title] %></p>
      </div>
    </div>
  <% end %>
<% end %>

search action

posts_controller.rb

class PostsController < ApplicationController
~abridgement
  def search
    contents = render_to_string(partial: 'posts/item_list.html.erb', locals:{items: search_by_rakuten(params[:title])})
    #returns contents to json
    render json: {contents: contents} #If you don't hash it, it won't read
  end

  private

   def search_by_rakuten(title)
    items = []　#When the method is called[]Leave empty
    if title.present?
      results = RakutenWebService::Books::DVD.search(
        title: title,　#Search field keywords
        booksGenreId: '003',　#Movie DVD genre designation
        hits: 10　#Get only 10 hit information
        #Get information by specifying conditions
      )
      results.each do |result|
         #Hash the acquired information and enter a value in the key
        item = {
          title: result['title'],
          url: result['itemUrl'],
          imageUrl: result['smallImageUrl'].gsub('?_ex=64x64', '')
        }#Put the hashed data in an array
        items << item
      end
    end
    items
  end
end

Ajax

• jquery implements ajax, but in this case, each person has a different method such as clicking and searching function, asynchronous communication is performed just by typing characters in the search field, so only the communication part of ajax is listed. There is a lot of ajax information, so if you are interested, please check it out.

post.js

$(function{
  funtion search(title){
  //abridgement
  $.ajax({
        url: "/search",
        type: "GET",　//Access search action with get
        dataType: "json",
        async: true,
        data: { title: title },　//Specifying search parameters(:title)
      }).done(function (data) {
        $("#item_list").css("display", "");
        $("#item_list").html(data.contents); //render json:{contents: contents}Content display of
      });
}
})

The search function is now implemented.

At the end

With the above, the search function can be implemented and the searched information can be obtained. It took 4 or 5 days just to implement this feature. It made me realize that my json, ajax, and ruby lacked knowledge, but I was able to realize the awesomeness of disagreement communication. We will continue development.