2011-04-01 41 views
3

所以我开发了一个简单的标签系统,遵循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格式正确,您可以检查插件文档。但是,我仍然能够成功地根据用户输入的内容返回建议......所以我不确定发生了什么。

回答

1

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

我非常喜欢在发布的链接中复制并粘贴来自第一个答案的代码,并且自动完成与我的自定义非常吻合RoR代码。

我仍然有兴趣听到如何定制另一个插件。