Autocomplete on appended field in JQuery

I am using JQuery to create additional input fields via clicking a link. Currently, I have an autocomplete plugin implemented that works fine for the fields that were created on page load. When the user adds new fields the autocomplete does not work for those specific fields. I was just wondering if someone could help me figure out how to get it to work.

<script type="text/javascript">
    $(document).ready(function() {
        $('#addingredient').click(function() {
            $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />')
            .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />')
            .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>')
            .appendTo('#ingredients')
            .hide()
            .fadeIn('normal');
        });
</script>

<script>
    $(document).ready(function(){
        var data = "http://mywebsite.com/ingredients.php";
        $(".ingredient").autocomplete(data);
    });
</script>


<ul id="ingredients">
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li>
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li>
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li>
</ul>

From stackoverflow

• The problem is with the autocomplete only being initialized on page load. Thus not being added to dynamicly added inputs. You should add the autocomplete to those too by calling the autocomplete again. So after you have apended the new input just call the autocomplete function again:

   $(".ingredient").autocomplete(data);
  

  Joe Philllips : I tried that and it didn't work.

  Joe Philllips : Or maybe I did it incorrectly.

  Joe Philllips : It "didn't work" because I wasn't using it correctly. The other code made it explicit as how to use it which is why I accepted it. It was a close call either way.

  Pim Jager : Ah ok, thanks for explaining.

• Because you're doing the autocomplete before a new one is created. It doesn't just auto-apply it, it only does it when the DOM is ready.

  <script type="text/javascript">
  
  $(document).ready(function() {
      $('#addingredient').click(function() {
          $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />')
          .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />')
          .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>')
          .appendTo('#ingredients')
          .hide()
          .fadeIn('normal');
  
          var data = "http://mywebsite.com/ingredients.php";
          $('.ingredient').autocomplete(data);
      });
  }
  
  </script>
  

  Try that instead.

  tvanfosson : This will rerun autocomplete on all elements, not just the new one. That's probably ok, but overkill.

  Kezzer : Aye, I was thinking of that as it's something I've done. If it's for a small amount it shouldn't be too much pressure on the browser.

  Pim Jager : Just wondering, how excactly does this defer from my answer? (On which d03boy commented that is doesn't work)

  Joe Philllips : For extra credit, how can I NOT request the data from the website every time? I'm not quite sure how to mix javascript and PHP in that aspect.

  Kezzer : @d03boy: tvanfosson's answer is by far the most correct answer in this thread and will also be the most efficient. Use that one.

  Joe Philllips : Yes, I've just tried it out and it works.

• You need to rerun the autocomplete on the new element, after it has been added to the DOM. The following will wait until the element has been faded in, then sets up the autocomplete on the new element with the correct class.

  <script type="text/javascript">
      var data = "http://mywebsite.com/ingredients.php";
      $(document).ready(function() {
          $('#addingredient').click(function() {
              $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />')
              .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />')
              .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>')
              .appendTo('#ingredients')
              .hide()
              .fadeIn('normal', function() {
                  $(this).find('.ingredient').autocomplete(data);
              });
          });
          $(".ingredient").autocomplete(data);
      });
  </script>
  

  Joe Philllips : I just need to look into caching the URL data now.. hrm.