In Rails, what's the best way to get autocomplete that shows names but uses identifiers?

Question

I want to have a text box that the user can enter that displays a list of my model names populated by Ajax, and then when the user selects it, I want the HTML to keep the model identifier, and use this when the forms are.

I was digging out an auto_complete plugin that was cut out in Rails 2, but it doesn't seem to suspect that this could be useful. There is an episode of Railscast that covers this plugin, but it does not cover this topic. The comments indicate that this may be a problem , but points to model_auto_completer as a possible solution , which seems to work if the elements viewed are simple strings, but the inserted text contains a lot of unwanted spaces if (as I would like to do) you include the image in list items, despite what the documentation says .

I could hack model_auto_completer into a form, and I can still do it, but I really want to find out if there are any better options there.

Answer 1

I have a fixed fix for unwanted spaces from the image. I added :after_update_element => "trimSelectedItem" to the model_auto_completer parameter model_auto_completer (the first hash of the three data). My trimSelectedItem then finds the corresponding subitem and uses its contents for the value of the element:

 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 } 

However, this starts with the option :allow_free_text , which by default changes the text back as soon as the text field loses focus if the text inside is not a "valid" element from the list. Therefore, I also had to disable this by passing :allow_free_text => true to the parameter hash (again, the first hash). I would prefer this to continue.

So my current call to create autocomplete is:

 <%= 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'}) %> 

And 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

I rode myself. The process is a bit confusing, but ...

I just created a text box in a form with an observer. When you start to enter a text field, the observer sends a search string, and the controller returns a list of objects (no more than 10).

Then the objects are sent for rendering through the part that fills the results of dynamic autocomplete. Partially actually fills the link_to_remote lines, which are again sent back to the controller. Link_to_remote sends the user ID, and then some RJS clear the search, fill in the name in the text box and then put the selected identifier in the hidden form field.

Phew ... I could not find a plugin to do this at the time, so I rolled back, I hope all this makes sense.