自动完成工作在第一行但不适用于新行

时间:2013-07-22 13:50:15

标签: jquery jquery-ui

我想在每一行上自动完成,但它只在第一行工作。

autocomplere在第一行正常工作但是当我添加新行时,自动完成功能不起作用。 我的代码在这里 任何解决方案

这是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>

这是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,
    });

你可以在Js Fiddle中看到:http://jsfiddle.net/anosim/n3auc/4/ 请帮助我,先谢谢

1 个答案:

答案 0 :(得分:3)

您的新行是动态添加的,所以我认为添加新的行函数需要一些额外的代码,如下所示:

            $("#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/