2011-04-01 170 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代碼。

我仍然有興趣聽到如何定製另一個插件。

相關問題