Question

所以我在this railscast之后开发了一个简单的标记系统，它可以根据需要运行。现在我想将这个标记系统与自动完成结合起来，这就是我遇到麻烦的地方。从头开始将代码与插件混合可能会使事情变得混乱：/

我正在使用this autocomplete plugin，默认情况下，它会将所选元素添加到文本字段中。但是，我想通过以下几种方式对其进行自定义：

在用户选择建议后，我不希望标记出现在字段内。选择它们后，我已经在文本字段上方显示了标记。

我通过AJAX在字段上方显示标记，该标记在用户单击向更新操作发送POST请求的按钮后触发。当我实现插件时，它只允许我添加建议的标签而不是新的标签。当我尝试添加新标记（不在建议列表中）时，根据我的日志，我的POST请求显示带有标记名称为空字符串的params散列。有一些关于自动完成没有找到擦除它与POST请求一起发送的字符串。不使用自动填充功能，我的标记系统可以正常使用新标记。

如果我从建议列表中选择一个标签，则会添加标签，但会显示标签的ID号而不是标签名称。我的日志告诉我，params哈希包含标签名称作为标签的id。情况并非如此。

我知道这些是很多问题/问题，但我真的很感激这方面的帮助。

这是我的代码，用于设置没有自动完成的简单标记。这是在我的视频模型（被标记的资源）中，它将topic_names设置为虚拟属性：

attr_accessor :topic_names
after_save :assign_topics

def assign_topics
if @topic_names
  self.topics << @topic_names.map do |name|
    Topic.find_or_create_by_name(name)
  end
 end
end

在我的视频节目视图中，添加标签的表单：

<%= form_for @video, :remote => true do |f| %>
  <div class="field">
  <%= f.text_field :topic_names, :class => "topic_field" %>
  </div>
  <%= f.submit "Add Topic" %>
<% end %>

这也是放在表格上方的视频节目视图中。它遍历该视频的标签并显示它们：

<div class="topic_holder">
<% @video.topics.uniq.each do |topic| %>
  <%= link_to "#{topic.name}", "#", :class => 'topic_style round' %>
<% end %>

当您单击表单中的提交按钮时，视频控制器中的更新操作会使用AJAX处理请求，以便自动显示标记。

现在这个标记系统工作正常，但我想将它与自动完成结合起来，这样当你开始输入时，它会显示已经应用的标签选择。如果您选择建议的标签，我希望它出现在该字段上方。如果您输入新标签，我也希望它出现在该字段上方。如果您选择已添加到视频中的标记，我不希望它再次出现。另外，我不希望标签出现在标签字段中。

现在我已使用此代码实现了the autocomplete plugin。让我们从创建这个命名范围的主题模型开始：

scope :search, lambda {|q| where("name LIKE ?", "%#{q}%") }

然后在主题控制器的索引操作中：

def index
    @topics = Topic.search(params[:q])
    respond_to do |format|
     format.html 
     format.json {render :json => @topics.map(&:attributes).to_json}
    end
  end

然后在application.js：

$(".topic_field").tokenInput("/topics", {
        hintText: "Start typing in a topic...",
        theme: "facebook",
        preventDuplicates: true
    });

一旦我实现了这个自动完成插件，建议列表的生成就可以正常工作。但是，我在那个巨大的文本墙中遇到了问题详细信息顶部提到的所有问题。我应该如何定制这个插件以满足我的需求并将其与我的自定义RoR代码相结合？

更新：

根据上面的代码，根据我的Chrome调试器，我的JSON格式不正确：

[{"name":"ssdd","created_at":"2011-04-01T04:33:52Z","updated_at":"2011-04-01T04:33:52Z","id":37},{"name":"dsdds","created_at":"2011-04-01T05:12:57Z","updated_at":"2011-04-01T05:12:57Z","id":43}]

要检查插件所需的JSON格式是否正确，您可以查看插件文档。但是，我仍然能够根据用户输入的内容成功返回建议...所以我不确定发生了什么。

Answer 1

好的，我已经通过切换到jQuery UI自动完成插件解决了这个问题。看起来与我最初计划使用的插件相比，jQuery UI插件需要更多代码来设置，但它更容易接受自定义。这里有一个关于如何在Rails中使用jQuery UI插件的非常好的解释：How to set-up jquery-ui autocomplete in Rails

我几乎复制并粘贴了我发布的链接中第一个答案的代码，自动完成功能与我的自定义RoR代码非常吻合。

我仍然有兴趣听听如何自定义其他插件。

我应该如何自定义此自动完成插件？

1 个答案: