我對圖像中的垃圾空間進行了修復。我在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>