所以我開發了一個簡單的標籤系統,遵循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格式正確,您可以檢查插件文檔。但是,我仍然能夠成功地根據用戶輸入的內容返回建議......所以我不確定發生了什麼。