autocomplete on input field created with jquery after()

Question

I have a field on which an autocomplete function is implemented. This is my code :

<%= f.text_field :auteur_1, size: 100, class:"champs_auteur", data: {autocomplete_source: auteurs_enum_path} %>

That creates the following html :

<input size="100" class="champs_auteur ui-autocomplete-input" data-autocomplete-source="/auteurs/enum" name="biblio[auteur_1]" id="biblio_auteur_1" autocomplete="off" type="text">

And this is in my javascript :

$(document).on('ready', function() {
  return $('.champs_auteur').autocomplete({
    source: $('.champs_auteur').data('autocomplete-source')
  });
});

All that works fine. I am creating input fields using jquery after() and append(), like this :

$(document).on('ready', function () {
    i = 2 ;
    $(".extra_auteur").click(function(){
        $('.premier_auteur').after('<div class="grid mbm"><div class="one-sixth"><label for="biblio_auteur">Auteur</label></div><input size="100" class="champs_auteur" data-autocomplete-source="/auteurs/enum" type="text" name="biblio[auteur_' + i++ + ']" id="biblio_auteur_1" /></div>');
        });
  });

This is minified code (mainly html) for :

<div class="grid mbm">
    <div class="one-sixth">
        <label for="biblio_auteur">Auteur</label>
    </div>
    <input size="100" class="champs_auteur" data-autocomplete-source="/auteurs/enum" type="text" name="biblio[auteur_' + i++ + ']" id="biblio_auteur_1" />
</div>

This does create the input field with an id="biblio_auteur_2" (and 3, 4 etc...).

The autocomplete doesn't work on the additional input fields. I don't see why not.

Answer 1

This is because you're using the element #ID instead of the class-name as in:

$( "#aut_extra" )

And #ID is always unique, and will therefore only work for 1 item. What yu need to do is have the jQuery select the CSS element class instead and not ID.

$( ".aut_extra" ) 

or whatever the class name is.

But you must be sure that the element which currently have the ID of aut_extra instead have a CSS class with the same name.

<div class="aut_extra"....

Answer 2

Crashtor is correct, page ids MUST be unique for proper functioning. However, you might have another issue. You're calling autocomplete during document ready, but when you change the dom by adding new fields, those existed after the autocomplete function was initialized.

Try calling autocomplete on each after append.

$('.extra_amatur:last').find('input[type=text]:last').autocomplete({
     source: $(this).data('autocomplete-source')
});

Answer 3

Thanks both for your help. Both errors needed to be corrected, the first on that only classes should be used and the second that the autocomplete should be used on another event then document ready. I took on click.

This is the code (if this could ever help someone) :

$(document).on('click', '.champs_2_auteur', function() {
    return $('.champs_2_auteur').autocomplete({
        source: $('.champs_2_auteur').data('autocomplete-source')
    });
});