How should I customize this autocomplete plugin?

So I've developed a simple tagging system following this railscast and it works as desired. Now I want to combine this tagging system with autocompletion, and this is where I run into trouble. Mixing from-scratch code with a plugin can make things get messy :/

I'm using this autocomplete plugin and by default, it adds selected elements to the textfield. However, I want to customize this in a couple of ways:

I don't want the tags to appear inside the field after the user selects a suggestion. I already have the tags appear above the text field when they are selected.

I have the tags appear above the field via AJAX that is triggered after the user clicks a button that sends a POST request to the update action. When I implement the plugin, it only lets me add suggested tags and not new tags. When I try to add a new tag (one that is not in the suggested list), according to my logs my POST request displays the params hash with tag name as an empty string. There's something about autocomplete not finding the string that wipes it from being sent with the POST request. Without using autocomplete, my tagging system works normally with new tags.

If I pick a tag from the suggestion list, the tag is added but displays the id number of the tag instead of the tag name. My logs show me that the params hash contains the tag name as the id of the tag. This should not be the case.

I know these are a lot of questions/issues, but I'd really appreciate some help on this.

Here's my code to set up simple tagging w/o autoco开发者_如何转开发mpletion. This is in my video model(the resource being tagged) and it sets up topic_names as a virtual attribute:

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

And in my video show view, the form to add tags:

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

This is also in the video show view placed above the form. It loops through the tags for that video and displays them:

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

When you click the submit button in the form, my update action in the video controller handles the request with AJAX so that the tags are displayed automatically.

Now this tagging system works fine, but I want to combine this with autocompletion so that when you start typing, it shows you a selection of tags that have already been applied. If you pick a suggested tag, I want it to appear above the field. If you enter in a new tag, I also want it to appear above the field. And if you pick a tag that has already been added to the video, I do not want it to appear again. Also, I do not want tags to appear inside the tag field.

Now I've implemented the autocomplete plugin with this code. Let's start in the topic model where I create this named scope:

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

Then in the index action of the topics controller:

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

And then in application.js:

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

Once I implement this autocompletion plugin, the generation of the suggestion list works properly. However, I run into all of the problems mentioned at the top of the question details in that huge wall of text. How should I go about customizing this plugin to meet my desires and combining it with my custom RoR code?

UPDATE:

With the code above, my JSON is being formatted incorrectly according to my Chrome debugger:

[{"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}]

To check the correct format of the JSON that the plugin requires, you can check the plugin docs. However, I am still successfully able to return suggestions based on what the user types... so I'm not sure what's going on.

---

Ok so I've solved this problem by switching to the jQuery UI autocomplete plugin. It seems that in comparison to the plugin I initially planned on using, the jQuery UI plugin involves a little more code to setup, but it's much more receptive to customization. Here's a really great explanation on how to use the jQuery UI plugin with Rails: How to set-up jquery-ui autocomplete in Rails

I pretty much copy-and-pasted the code from the 1st answer in the link I posted, and the autocomplete works very well with my custom RoR code.

I'd still be interested in hearing how to customize the other plugin though.