将 Jquery UI Autocomplete 与 Jquery 结合使用，以便为我的标签设置 Stackoverflow 样式？

Question

目前我成功地使用 jquery ui 自动完成 acts_as_taggable_on rails gem。

但是，当您提出带有 X 标记的问题时，我希望我的标签能够像在 Whosebug 上一样显示，单击 X 标记可以删除它们。

为此我想使用 Chosen

进入gem文件：

gem 'compass-rails'
gem 'chosen-rails'

进入app/assets/javascripts/application.js 如果与jQuery

一起使用

//= require chosen-jquery

进入app/assets/stylesheets/application.css

*= require chosen-compass

不，我需要在表单的 id/class 上调用 .chosen 函数。但是我根本没有让它工作。这是我的表格：

<%= form_for :photo, url: photos_path, html: {multipart: true } do |f| %>
  <%= f.file_field :picture %>
  <%= f.text_field :title %> 
  <%= f.autocomplete_field :tag_list, autocomplete_tag_name_photos_path, :placeholder => 'Tags', :"data-delimiter" => ', ', 'data-auto-focus' => true %>
  <%= f.submit %>
<% end %>

使用Chrome开发者工具

检查标签输入框

<input placeholder="Tags" data-delimiter=", " data-auto-focus="true" data-autocomplete="/photos/autocomplete_tag_name" type="text" name="photo[tag_list]" id="photo_tag_list" class="ui-autocomplete-input" autocomplete="off">

能否请您提供正确的脚本以将 .chosen 应用于此表单？

这是我在 jquery 中尝试调用所选内容的尝试：

$(document).on('page:change', function () { 
  $('#photo_tag_list').chosen
    allow_single_deselect: true;
    no_results_text: 'No results matched';
    width: '200px';
});

编辑：我突然想到，如果我能弄清楚如何将提交的标签放入它们自己的元素（例如 ul/li 中，我可以自己做 css。

Answer 1

这是不可能的，但是更简单的解决方案是使用 select2 gem 和 acts_as_taggable_on gem 来创建 Whosebug 样式的标记系统。

https://github.com/argerim/select2-rails

将 Jquery UI Autocomplete 与 Jquery 结合使用，以便为我的标签设置 Stackoverflow 样式？

Combine Jquery UI Autocomplete with Jquery Chosen for a Stackoverflow styling of my tags?

ruby-on-rails

jquery-ui-autocomplete

jquery-chosen