2008-09-17 51 views
4

我想擁有一個用戶可以輸入的文本框,其中顯示了我的模型名稱的Ajax填充列表,然後當用戶選擇一個我希望HTML保存模型的ID並在表單使用時已提交。在Rails中,獲取顯示名稱但使用ID的自動完成功能的最佳方法是什麼?

我一直在撬動在Rails 2中被刪除的auto_complete插件,但它似乎沒有暗示這可能是有用的。有一個覆蓋使用該插件的Railscast episode,但它並未涉及此主題。評論point out that it could be an issuepoint to model_auto_completer as a possible solution,如果查看的項目是簡單的字符串似乎工作,但插入的文本包含很多垃圾空間,如果(如我所願)你包含一個圖片到列表項despite what the documentation says

我可能會破解model_auto_completer,我可能最終還是會這樣做,但我很想知道是否有更好的選擇。

回答

0

我對圖像中的垃圾空間進行了修復。我在model_auto_completer的選項散列中添加了一個:after_update_element => "trimSelectedItem"(這是三個給定的第一個散列)。我trimSelectedItem然後找到合適的子元素,並使用的是內容的元素值:

function trimSelectedItem(element, value, hiddenField, modelID) { 
    var span = value.down('span.display-text') 
    console.log(span) 
    var text = span.innerText || span.textContent 
    console.log(text) 
    element.value = text 
} 

然而,這種然後運行:allow_free_text選項,默認情況下儘快更改文本早在文本相沖突如果內部文本不是列表中的「有效」項目,則框會失去焦點。所以我也不得不通過將:allow_free_text => true傳入選項散列(再次,第一個散列)來關閉它。不過,我真的寧願繼續。

所以我當前呼叫創建autocompleter是:

<%= model_auto_completer(
    "line_items_info[][name]", "", 
    "line_items_info[][id]", "", 
    {:url => formatted_products_path(:js), 
    :after_update_element => "trimSelectedItem", 
    :allow_free_text => true}, 
    {:class => 'product-selector'}, 
    {:method => 'GET', :param_name => 'q'}) %> 

而且產品/ index.js.erb的是:

<ul class='products'> 
    <%- for product in @products -%> 
    <li id="<%= dom_id(product) %>"> 
      <%= image_tag image_product_path(product), :alt => "" %> 
      <span class='display-text'><%=h product.name %></span> 
    </li> 
    <%- end -%> 
</ul> 
1

我推出了自己的。這個過程有點複雜,但...

我剛剛在窗體上用一個觀察者做了一個text_field。當您開始在文本字段中輸入內容時,觀察者發送搜索字符串,控制器返回對象列表(最多10個)。

然後將對象發送到通過填充動態自動填充搜索結果的部分進行渲染。該部分實際上會填充link_to_remote行,並將其重新發送回控制器。 link_to_remote發送用戶選擇的ID,然後一些RJS清理搜索,在文本字段中填寫名稱,然後將選定的ID放入隱藏表單字段中。

唷......我當時找不到插件來做這件事,所以我推出了我自己的,我希望這一切都有道理。

相關問題