I’m an advisor and consultant for a social network site where you go upload images and tag the stuff you own and the stuff you want. One of the thing we wanted to do in the stuff-tagging form was to have related autocompletion fields. In this case, we want an autocompletion of brand names, and then based on the brand name input, we narrow down the autocompletion for models to only the models for that brand. This should be a pretty commonly done, but the auto_complete plugin in Rails has no easy way to do this.
The obvious approach was to use Rails’ autocompletion plugin to do the first field, and then use Scriptaculous directly for the second field, my first approach looked like this:
< %= text_field_with_auto_complete :product, :brand %> <input id="product_model" name="product[name]" size="30" type="text" /> <div class="auto_complete" id="product_model_auto_complete"></div> <script type="text/javascript"> new Ajax.Autocompleter( 'product_model', 'product_model_auto_complete', '/products/auto_complete_for_product_model', { parameter: 'brand=' + $F('product_brand') } ); </script>
But this didn’t work because the parameters are populated on instantiation of the Ajax.Autocompleter, so dynamic form content are not properly sent to the controller. Took some googling and playing around to figure this out, but the solution is to append the additional parameter by overriding the callback.
< %= text_field_with_auto_complete :product, :brand %> <input id="product_model" name="product[name]" size="30" type="text" /> <div class="auto_complete" id="product_model_auto_complete"></div> <script type="text/javascript"> new Ajax.Autocompleter( 'product_model', 'product_model_auto_complete', '/products/auto_complete_for_product_model', { callback: function(e, qs) { return qs + '&brand=' + $F('product_brand'); } } ); </script>
Just for fun, I’m including the ajax endpoint to show how I generate the results in the desired unordered list format using the auto_complete_result helper. You should always specify a limit in these type of queries.
def auto_complete_for_product_model @results = Product.find_by_sql( [ %Q{select p.name from brands b, products p where lower(b.name) = ? and p.brand_id=b.id and lower(p.name) like ? limit 10}, "#{params[:brand].downcase}", "#{params[:product][:name].downcase}%" ]) if params[:brand] && params[:product][:name] render :inline => "< %= auto_complete_result @results, 'name' %>" end
BTW, this site is gonna make an appearance at the Techcrunch 50 demo pit, I should be there, check my Tweets, stop by and say hi if you happen to be around.
(the wp-syntax plugin adds a whitepsace between the < and the %, if you copy and paste my code you probably have to remove all the spaces for the erb to work.)
