输入自动完成或 Rails 中的新功能答案

【问题标题】：Input Autocomplete or New in Rails输入自动完成或 Rails 中的新功能
【发布时间】：2018-02-26 06:42:58
【问题描述】：

我有一个简单的疑问。我正在研究 Rails 5 上的 ruby，并且我的关系是父级是“类别”，子级是“短语”。我的用户可以创建短语，但我不想要一个单独的表单来创建类别，这只是一个 id 和一个名称。我希望在短语的表单中输入一个用户可以键入类别的输入，然后会弹出一个带有可用选项的自动完成功能，但是如果他想要一个新选项，他只需键入它，它会在他保存时创建一个新选项表格。

我已经看到与 jquery-ui 自动完成类似的东西，但我无法使其正常工作，因为它需要 javascript 中的预定义列表。谢谢。

【问题讨论】：

ruby 部分只是创建一个 form_for 类别，其中包含短语的嵌套属性。 jquery 部分您可以使用上面@muistooshort 给您的链接解决，或者您可以使用link
谢谢，我混合了两个答案。

标签： javascript jquery ruby-on-rails ruby autocomplete

【解决方案1】：

类似的解决方案是使用datalist 和option 标签作为您的输入。喜欢：

   <%= form_for @phrase do |phrase_form| %>
     <%= f.text_field :name >
        #=> other fields for phrase ........

        <%= fields_for :category do |category_builder| %>
        <%= category_builder.text_field :name, :list => "categories_list" %>
         <datalist id = "categories_list" >
           <% Category.all.each do |c| do %>
           <option value = "<%=c.name%>"  ></option>
           <% end %>    
         </datalist>
        <% end %>    
        <% end %>

然后你在phrase.rb模型文件中添加accept_nested_attributes_for :category

在文本字段中输入后，您将获得类别的可用选项列表

其他解决方案是为短语category_name 和category_name=(name) 定义一个新方法

def category_name=(name) 
   self.category = Category.find_or_create_by(:name => name)
end

然后<%= f.text_field :category_name, :list => "categories_list %>"

【讨论】：

【解决方案2】：

如果您想选择应该呈现哪个列表，您可以制作相同的内容：

<div id="div-breed" class="col-lg-5 input-group-prepend" style="display: none" data-toggle="tooltip" data-placement="right" title="Campo Raça é obrigatório">
  <span>Raça (*)</span>
  <%= f.text_field :breed, list: "pet-breed", class: "form-control mt-2" %>

  <datalist id="pet-breed">
    <% breed_canina.each do |canineBreed| %>
      <option value="<%= canineBreed.name %>"></option>
    <% end %>
  </datalist>
</div>

并选择需要使用 Jquery 渲染的品种：

// #pet_kind can be "Canina" or "Felina"

$('#pet_kind').change(() => {
  $('#div-breed').css("display", "none");

  if ($('#pet_kind').val() === 'Canina') {
    $("#pet-breed").html(
      `<% breed_canina.each do |canineBreed| %>
        <option value="<%= canineBreed.name %>"></option>
      <% end %>`
    );

    $('#div-breed').css("display", "block");
  } else if ($('#pet_kind').val() === 'Felina') {
    $("#pet-breed").html(`
      <% breed_felina.each do |felineBreed| %>
        <option value=\"<%= felineBreed.name %>\"></option>
      <% end %>
     `);

    $('#div-breed').css("display", "block");

  }
});

【讨论】：