Using .live to add autocomplete to fields created with AJAX

Author: David Padilla

lib/cucumber/autocomplete.rb

@@ -1,4 +1,5 @@
 Given /^I choose "([^"]*)" in the autocomplete list$/ do |text|
+  page.execute_script %Q{ $('input[data-autocomplete]').trigger("focus") }
   page.execute_script %Q{ $('input[data-autocomplete]').trigger("keydown") }
   sleep 1
   page.execute_script %Q{ $('.ui-menu-item a:contains("#{text}")').trigger("mouseenter").trigger("click"); }

lib/generators/templates/autocomplete-rails.js

@@ -5,17 +5,17 @@
 * with the autocomplete URL as the value
 *
 *   Example:
-*       <input type="text" autocomplete="/url/to/autocomplete">
+*       <input type="text" data-autocomplete="/url/to/autocomplete">
 * 
 * Optionally, you can use a jQuery selector to specify a field that can
 * be updated with the element id whenever you find a matching value
 *
 *   Example:
-*       <input type="text" autocomplete="/url/to/autocomplete" id_element="#id_field">
+*       <input type="text" data-autocomplete="/url/to/autocomplete" id_element="#id_field">
 */
 
 $(document).ready(function(){
-  $('input[data-autocomplete]').each(function(i){
+  $('input[data-autocomplete]').live('focus', function(i){
     $(this).autocomplete({
       source: $(this).attr('data-autocomplete'),
       select: function(event, ui) {
@@ -27,4 +27,4 @@ $(document).ready(function(){
       }
     });
   });
-});
+});