У меня есть исправленное место для ненужных мест на картинке. Я добавил :after_update_element => "trimSelectedItem"
к хэшу опций model_auto_completer
(это первый из трех данных хэшей). My 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
в хэш опций (опять же, первый хеш). Я бы действительно предпочел, чтобы он оставался включенным.
Итак, мой текущий вызов для создания автозаполнения:
<%= 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'}) %>
А products / 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>