Rails jQuery-自动完成客户端

Posted 2023-05-09

【中文标题】Rails jQuery-自动完成客户端

【英文标题】：Rails jQuery-autocomplete client-side

【发布时间】：2016-02-24 21:41:01

【问题描述】：

需要使用自动完成字段而不是下拉字段更新我的 recipe#new 视图。在阅读了一些文章后，我决定使用 jQuery-ui。

所以添加到 Gemfile 中

gem "jquery-ui-rails"

和 application.js

//= require jquery-ui

观点

<%= form_for @recipe do |f| %>
  <%= f.fields_for :quantities do |quantity| %>
    <%= f.label :ingredient, "Ingredient" %>
    <%= f.text_field :ingredient_id, 
                      class: "search-query", 
                      type: "search", 
                      data:  autocomplete_source:
                                    Ingredient.order(:name).map  |t| 
                                       :label => t.name, :value => t.id  %>  
  <% end %>
<% end %>

RecipesController 需要一个成分 ID，但表单提交：

"ingredient_id"=>"糖"

Started POST "/recipes" for 127.0.0.1 at 2015-11-22 20:35:48 +0100
Processing by RecipesController#create as html
  Parameters: "utf8"=>"V",
    "authenticity_token"=>"7EOoZpjm3hW3Bzv4N6lLWu534xw==", 
    "recipe"=>"name"=>"Apple Pie", 
    "quantities_attributes"=>
      "1448220899039"=>
      "ingredient_id"=>"Sugar", 
       "scale_id"=>"2", 
       "amount"=>"100", 
    "caption"=>"Grandmother's Apple Pie",
    "button"=>""

如何处理自动完成，它提交的是成分 ID 而不是名称？

【参考方案1】：

我在视图中添加了这个：

<%= text_field_tag nil, nil, :class => 'searchbar', data:  autocomplete_source: Ingredient.order(:name).map  |t| 
                                                       :label => t.name, :value => t.id    %>

<%= f.hidden_field :ingredient_id, class: 'ingredient_id' %>

<script>
  $('.searchbar').autocomplete(
    source: $('.searchbar').data('autocomplete-source'),
    select: function(event, ui) 
      event.preventDefault();
      this.value = ui.item.label
      $('.ingredient_id').val(ui.item.value)
    
 );
</script>