将图标添加到语义UI的搜索下拉列表中

Question

我想将语义ui图标添加到应该存在的搜索下拉列表中，而不管在ruby on rails应用程序中选择了什么选项。基本上，它应该看起来像这样：

到目前为止，我的工作是使用以下代码进行搜索：

= select_tag(:"q[camera_id_eq]", content_tag(:option, "Choose location . . .", value: "") + options_from_collection_for_select(Camera.all, "id", "full_location"), class: 'ui fluid search selection dropdown')

我检查了semantic ui dropdown documentation，但没有找到针对此特定问题的解决方案。他们只有一个用于下拉菜单的按钮实现，但是对于我来说，相同的方法行不通。

Answer 1

我几乎是前端的新手，但我希望这对您有所帮助。我与您分享以下示例。假设你在 Form 里面，据我所知，一切都在 HTML 结构中，使用 <div> 和 <i> 作为 text_field，但是对于 collection_select 我做到了以不同的方式，我没有以更简单的方式实现它。

如果您使用 text_field 和 collection_select。

<%= form_with(model: person, local: true, html: { class: "ui form", autocomplete: "off" }) do |form| %>
     <div class="field">
         <%= form.label :name %>
         <div class="ui right icon input">
            <%= form.text_field :name %>
            <i class="user icon"></i>
          </div>
        </div>

        <div class="field">
            <%= form.label :country_id %>
            <%= form.collection_select :country_id, @countries,:id, :name, options = {:prompt => 'Select a Country...'}, html_options = {class: "ui fluid search selection dropdown"}%>
        </div>
                
    <div class="actions">
    <%= form.submit %>
    </div>
 <% end %>

然后我将我的 Js $('.dropdown').dropdown(); 放在我的 application.js 上

$(document).on('turbolinks:load', function()
 {
  // Person form dropdown
  $('.dropdown').dropdown();    
})

其他方法：

跳过视图中的 html_options。

<div class="field">
    <%= form.label :country_id %>
    <%= form.collection_select :country_id, @countries,:id, :name, options = {:prompt => 'Select a Country...'} %>
</div>

在您的 application.js 中添加带有下一个代码和函数 dropdown() 的 html_options，顺便说一下只需考虑拥有元素的 ID，在我的情况下它是 #person_country_id：

$(document).on('turbolinks:load', function()
     {
    $('#person_country_id').addClass("ui fluid search selection dropdown")
       .dropdown();
})

问候。