Question

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

我一直在寻找在Rails 2中被删除的auto_complete插件，但它似乎没有暗示这可能有用。有一个Railscast episode涵盖了使用该插件，但它没有涉及这个主题。评论point out that it could be an issue和point to model_auto_completer as a possible solution，如果查看的项目是简单的字符串似乎有效，但插入的文本包含大量的垃圾空间，如果（我想这样做）您将图片包含在内列表项despite what the documentation says。

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

Answer 1

我自己动手了。这个过程有点令人费解，但是......

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

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

Phew ...当时我找不到一个插件来做这个，所以我自己动手，我希望这一切都有意义。

Answer 2

我对图像中的垃圾空间进行了一次陈旧的修复。我在: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'}) %>

产品/ 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>

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

2 个答案: