Search code examples
rubyautocompleteruby-on-rails-4erbslim-lang

how to convert this slim to ERB?


Am trying autocomplete in rails. since am noob in rails am not able to convert this slim code to erb so can anybody help me out!!!

first slim file

# app/views/books/index.html.slim
= form_tag books_path, class: "form-inline", method: :get do
.form-group
= text_field_tag :query, params[:query], class: "form-control"
'
= submit_tag "Search", class: "btn btn-primary"
- if params[:query].present?
'
= link_to "clear", books_path

second slim file

 #app/views/layouts/application.html.slim
 = javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/ typeahead.min.js"

third slim file

# app/views/books/index.html.slim
= form_tag books_path, class: "form-inline", method: :get do
.input-group.input-group-lg
- if params[:query].present?
.input-group-btn
= link_to "clear", books_path, class: "btn btn-default"
= text_field_tag :query, params[:query], class: "form-control", id: "book_search", autocomplete: "off"
.input-group-btn
 = submit_tag "Search", class: "btn btn-primary"

Solution

  • First:

    <%=form_tag books_path, class: "form-inline", method: :get do %>
    <div class="form-group">
      <%= text_field_tag :query, params[:query], class: "form-control" %>    
      <%= submit_tag "Search", class: "btn btn-primary" %>
      <% if params[:query].present? %>    
        <%= link_to "clear", books_path %>
      <% end %>
    </div>
    

    Second:

    <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/ typeahead.min.js" %>
    

    Third:

    <%= form_tag books_path, class: "form-inline", method: :get do %>
    <div class="input-group input-group-lg" >
      <% if params[:query].present? %>
      <div class="input-group-btn">
        <%= link_to "clear", books_path, class: "btn btn-default" %>
     </div>
     <%= text_field_tag :query, params[:query], class: "form-control", id: "book_search", autocomplete: "off" %>
     <div class="input-group-btn">
       <%= submit_tag "Search", class: "btn btn-primary" %>
     </div>
    <% end %>
    </div>
    

    You can always verify it here - http://html2slim.herokuapp.com/

    Enjoy.