Question

I have this in my form, it’s really simple:

<script>
    $(function() {
        var availableProducts = [
             <% @products.each do |p| %>"<%= p.id %> <%= p.title %> (<%= p.product_type.name %>)",<% end %>
             ""
        ];
        $( "#tags" ).autocomplete({
            source: availableProducts
        });
    });
</script>

That gives me lists of things like 1 Title (Trade Paperback). All rails needs of course, is the id attribute. I’d planned on updating a hidden field with the attribute, using the select: event, but I’m not quite sure how to extract just the id from the data source to update the hidden field with. Should I change the data source to something that can have keys? Like JSON? I still wouldn’t know how to extract from that.

Here’s what the above code looks like in straight html:

<script>
    $(function() {
        var availableProducts = [
              "1 Test Title (eBook)",
              "2 Another Test Title (eBook)",
              ""
        ];
        $( "#products" ).autocomplete({
            source: availableProducts
        });
    });
</script>

Answer 1

Your source should be an array of {value: , label: } pairs. The labels are what will be displayed and autocompleted on, but then you can store the value in a hidden input.

Here’s an example:

http://jsfiddle.net/vZeHr/4/

and check out this sample on the jquery-ui docs page

http://jqueryui.com/demos/autocomplete/#custom-data

To generate the array from rails, you can do something like

var availableProducts = <%= @products.collect { :label => p.title, :value => p.id }.to_json ->;