所以我开发了一个简单的标签系统,遵循this railscast,它可以按照需要工作。现在我想将这个标记系统与自动完成功能结合起来,这就是我遇到麻烦的地方。从零开始的代码与插件混合可以使事情变得凌乱:/我应该如何定制这个自动完成插件?
我使用的是this autocomplete plugin,并且默认情况下,它将选定的元素添加到文本字段。但是,我想通过以下几种方式对其进行自定义:
我不希望标签在用户选择建议后出现在字段内。选中时,我已经在文本字段上方显示了标签。
我通过AJAX在字段上方显示标签,该标签在用户单击将POST请求发送到更新操作的按钮后触发。当我实现插件时,它只允许我添加建议的标签而不是新的标签。当我尝试添加一个新标签(不在建议列表中)时,根据我的日志,我的POST请求将带有标签名称的参数散列显示为空字符串。有一些关于自动完成的东西找不到用POST请求发送的字符串。如果不使用自动完成功能,我的标记系统可以正常使用新标记。
如果我从建议列表中选取标记,则会添加标记,但会显示标记的标识号而不是标记名称。我的日志显示,params散列包含标记名称作为标记的ID。这不应该是这样。
我知道这些问题很多,但我真的很感谢这方面的帮助。
这里是我的代码来设置简单的标记W/O自动完成。这是我的视频模式(即资源被标记),并设置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 %>
这也在放置在表单上方的视频节目视图中。它通过循环于该视频的标签,并将其显示:
当您单击的形式提交按钮,在视频控制器我的更新动作处理与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
然后在应用程序。js:
$(".topic_field").tokenInput("/topics", {
hintText: "Start typing in a topic...",
theme: "facebook",
preventDuplicates: true
});
一旦我实现了这个自动完成插件,建议列表的生成工作正常。但是,我遇到了那篇巨大的文本中问题细节顶部提到的所有问题。我应该如何定制这个插件来满足我的愿望,并将它与我的自定义RoR代码结合起来?
UPDATE:
通过以上,根据我的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格式正确,您可以检查插件文档。但是,我仍然能够成功地根据用户输入的内容返回建议......所以我不确定发生了什么。