在表单内部添加过滤器搜索,以便它可以发布数据

时间:2018-11-13 17:13:47

标签: javascript html ruby html5

我目前正在学习红宝石,并且正在尝试添加一个类似https://www.w3schools.com/howto/howto_js_filter_lists.asp的过滤器/搜索栏。在表单内部。因此从理论上讲,我可以从过滤器搜索中获取一种参数,并从用户输入中获取其他参数。

<h1>Add a new coin to your Coinfolio</h1>
<form id = "post-form" method = "post" action = "/coins">


<input type="text" id="coin-search-bar" onkeyup="myFunction()" placeholder="Search for coins..">

<ul id="available-coin-list">
  <% @available_coins.each_with_index do |coin, index| %>
  <li>
    <a>
      <%= coin.name %>  price = $ <%= coin.current_price  %>
      <input type = "text" name = "price_paid" placeholder="price paid:"/>
      <input type = "hidden" name = "coin_id" value = "<%= coin.id %>">
      <input type = "submit">
    </a>
  </li>

  <% end %>
</ul>
</form>

这是我到目前为止的内容,但是我没有在单击提交的params哈希中获得任何值。宁愿只能有一个搜索按钮和输入字段。任何想法我怎么能做到这一点。

1 个答案:

答案 0 :(得分:0)

我也在学习,但这就是我在导航栏中实现搜索栏的方法。也许有帮助。这段代码是我渲染到navbar.html中的部分html.erb。

<div class="advanced_search_container">
<div class="input-group" id="adv-search">
  <%= form_tag(dresses_path, {class: 'search form-inline my-2 my-lg-0', method: 'get'}) do %>
    <%= text_field_tag :search, '', class: " mr-sm-2", placeholder: "Find The Dress" %>
    <%= select_tag :size, options_for_select(Dress::SIZES), :prompt => "size", class: "select", style: "border-bottom:0px solid !important; margin-left:5px;width: 70px;"%>
    <%= select_tag :category, options_for_select(Dress::CATEGORIES), :prompt => "category" , class: "select", style: "border-bottom:0px solid !important; margin-left:5px;width: 70px;" %>
    <%= submit_tag 'Search', class: " search btn btn-outline-success my-2 my-sm-0 "%>
  <% end %>
</div>