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

我一直在戳Rails 2中删除的auto_complete插件，但似乎并没有暗示这可能有用。有一个Railscast插曲介绍了如何使用该插件，但是与本主题无关。评论指出这可能是一个问题，并指向" model_auto_completer"作为可能的解决方案，如果查看的项目是简单的字符串，则似乎可行，但是如果(如我想这样做)，尽管文档中有说明，但我们还是要在列表项中包含一张图片。

我可能会修改model_auto_completer的形状，但最终还是会这样做，但是我渴望找出是否有更好的选择。

解决方案

回答

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

我只是与观察者在表单上创建了一个text_field。当我们开始在文本字段中键入内容时，观察者将发送搜索字符串，控制器将返回一个对象列表(最多10个)。

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

ew ...我当时找不到能做到这一点的插件，所以我自己动手制作了，希望这一切有意义。

回答

我有一个针对图像中垃圾空间的修补程序。我在model_auto_completer的options哈希中添加了一个：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传递给选项哈希值(同样是第一个哈希值)来关闭它。不过，我确实希望它继续存在。

因此，我当前创建自动完成程序的调用是：

<%= 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>