0

I want to autocomplete on each row but it is working only on first row.

autocomplere working fine on first row but when i add new line there autocomplete does not work. My code is here any solution please

Here is HTML:

<table id="items">
    <thead>
        <th>Items</th>
    </thead>
    <tbody>
        <tr>
            <td><input class="input3 item" name="name_1" type="text" value="" autocomplete="off"></td>
        </tr>
    </tbody>
</table>
    <br clear="both">
    <div id="addmore">Add new line</div>

Here is Jquery:

// add new line
$("#addmore").click(
  function () {
      var someText = '<td><input class="input3 item" name="name_2" type="text" value=""></td>';
     var newDiv = $("<tr>").append(someText);
     $('#items').append(newDiv);
  }
);

// get autocomplete tags
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $( ".item" ).autocomplete({
      source: availableTags,
      minLength: 1,
    });

You can see in Js Fiddle: http://jsfiddle.net/anosim/n3auc/4/ Please help me, Thanks in Advance

anosim
  • 73
  • 3
  • 12

1 Answers1

3

Your new row is dynamically added so I think your add a new line function needs some additional code like this:

            $("#addmore").click(
              function () {
              var someText = '<td><input class="input3 item" name="name_2" type="text" value="">   </td>';
              var newDiv = $("<tr>").append(someText);
              $('#items').append(newDiv);
              $( ".item" ).autocomplete({
              source: availableTags,
              minLength: 1,
              });
             }
            );

JSfiddle: http://jsfiddle.net/n3auc/7/

Gloria
  • 1,053
  • 8
  • 18