在 Rails 中，获得显示名称但使用 ID 的自动完成功能的最佳方法是什么？

Question

我想要一个用户可以输入的文本框，其中显示我的模型名称的 Ajax 填充列表，然后当用户选择一个时，我希望 HTML 保存模型的 ID，并在提交表单时使用它。

我一直在研究 Rails 2 中删除的 auto_complete 插件，但似乎没有任何迹象表明这可能有用。有一个 Railscast剧集 其中涵盖了该插件的使用，但没有涉及这个主题。评论 指出这可能是一个问题, ， 和 指向 model_auto_completer 作为一个可能的解决方案, ，如果查看的项目是简单的字符串，这似乎可以工作，但是如果（正如我想做的那样）您在列表项目中包含图片，则插入的文本包含大量垃圾空间， 不管文档怎么说.

我可能可以破解 model_auto_completer 形状，我可能仍然会这样做，但我很想知道是否有更好的选择。

Answer 1

我对图像中的垃圾空间进行了老套的修复。我添加了一个 :after_update_element => "trimSelectedItem" 的选项哈希 model_auto_completer （这是给定的三个哈希值中的第一个）。我的 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>

Answer 2

我自己卷了。过程有点复杂，但是...

我刚刚用观察者在表单上创建了一个文本字段。当您开始在文本字段中输入内容时，观察者会发送搜索字符串，控制器会返回对象列表（最多 10 个）。

然后将对象发送到通过填充动态自动完成搜索结果的部分进行渲染。该部分实际上填充了再次回发到控制器的 link_to_remote 行。link_to_remote 发送用户选择的 id，然后一些 RJS 清理搜索，在文本字段中填写名称，然后将所选 id 放入隐藏的表单字段中。

呼……当时我找不到插件来执行此操作，所以我推出了自己的插件，我希望这一切都有意义。