<p>I want to have a text box that the user can type in that shows an Ajax-populated list of my model's names, and then when the user selects one I want the HTML to save the model's ID, and use that when the form is submitted.</p>

<p>I've been poking at the auto_complete plugin that got excised in Rails 2, but it seems to have no inkling that this might be useful. There's a <a href="http://railscasts.com/episodes/102-auto-complete-association" rel="nofollow noreferrer">Railscast episode</a> that covers using that plugin, but it doesn't touch on this topic. The comments <a href="http://railscasts.com/episodes/102-auto-complete-association#comment_37039" rel="nofollow noreferrer">point out that it could be an issue</a>, and <a href="http://model-ac.rubyforge.org/" rel="nofollow noreferrer">point to <code>model_auto_completer</code> as a possible solution</a>, which seems to work if the viewed items are simple strings, but the inserted text includes lots of junk spaces if (as I would like to do) you include a picture into the list items, <a href="http://model-ac.rubyforge.org/classes/ModelAutoCompleterHelper.html#M000003" rel="nofollow noreferrer">despite what the documentation says</a>.</p>

<p>I could probably hack <code>model_auto_completer</code> into shape, and I may still end up doing so, but I am eager to find out if there are better options out there.</p>

[{'answer_id': 81265, 'author': 'Dan Harper', 'author_id': 14530, 'author_profile': 'https://Stackoverflow.com/users/14530', 'pm_score': 1, 'selected': False, 'text': "<p>I rolled my own.  The process is a little convoluted, but...</p>\n\n<p>I just made a text_field on the form with an observer.  When you start typing into the text field, the observer sends the search string and the controller returns a list of objects (maximum of 10).</p>\n\n<p>The objects are then sent to render via a partial which fills out the dynamic autocomplete search results.  The partial actually populates link_to_remote lines that post back to the controller again.  The link_to_remote sends the id of the user selection and then some RJS cleans up the search, fills in the name in the text field, and then places the selected id into a hidden form field.</p>\n\n<p>Phew...  I couldn't find a plugin to do this at the time, so I rolled my own, I hope all that makes sense.</p>\n"}, {'answer_id': 81370, 'author': 'TALlama', 'author_id': 5657, 'author_profile': 'https://Stackoverflow.com/users/5657', 'pm_score': 1, 'selected': True, 'text': '<p>I\'ve got a hackneyed fix for the junk spaces from the image. I added a <code>:after_update_element =&gt; "trimSelectedItem"</code> to the options hash of the <code>model_auto_completer</code> (that\'s the first hash of the three given). My <code>trimSelectedItem</code> then finds the appropriate sub-element and uses the contents of that for the element value:</p>\n\n<pre><code>function trimSelectedItem(element, value, hiddenField, modelID) {\n    var span = value.down(\'span.display-text\')\n    console.log(span)\n    var text = span.innerText || span.textContent\n    console.log(text)\n    element.value = text\n}\n</code></pre>\n\n<p>However, this then runs afoul of the <code>:allow_free_text</code> option, which by default changes the text back as soon as the text box loses focus if the text inside is not a "valid" item from the list. So I had to turn that off, too, by passing <code>:allow_free_text =&gt; true</code> into the options hash (again, the first hash). I\'d really rather it remained on, though.</p>\n\n<p>So my current call to create the autocompleter is:</p>\n\n<pre><code>&lt;%= model_auto_completer(\n    "line_items_info[][name]", "", \n    "line_items_info[][id]", "",\n    {:url =&gt; formatted_products_path(:js),\n     :after_update_element =&gt; "trimSelectedItem",\n     :allow_free_text =&gt; true},\n    {:class =&gt; \'product-selector\'},\n    {:method =&gt; \'GET\',  :param_name =&gt; \'q\'}) %&gt;\n</code></pre>\n\n<p>And the products/index.js.erb is:</p>\n\n<pre><code> &lt;ul class=\'products\'&gt;\n    &lt;%- for product in @products -%&gt;\n    &lt;li id="&lt;%= dom_id(product) %&gt;"&gt;\n            &lt;%= image_tag image_product_path(product), :alt =&gt; "" %&gt;\n            &lt;span class=\'display-text\'&gt;&lt;%=h product.name %&gt;&lt;/span&gt;\n    &lt;/li&gt;\n    &lt;%- end -%&gt;\n &lt;/ul&gt;\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/81174', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5657/']