Question

我有一个页面，我想动态添加更多的文本字段，为此我正在使用jQuery .append函数。但是，我还想通过使用另一个jQuery函数让这些文本字段自动完成。这就是我的JavaScript：

<script>
$( document ).ready(function() {
    $("#addInputs").click(function() {
        $("#inputList").append("<input type='text' id='autocomplete' size='35' name='sales[]' /><br />");
    });
});
</script>
<script>
$(function ac() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Scheme"
  ];
  $( "#autocomplete" ).autocomplete({
    source: availableTags
  });
});
</script>

我有以下HTML：

    <div id='inputList'>
    <input type='text' id='autocomplete' size='35' name='sales[]' /><br />
    </div>
    <a id='addInputs' />Add Inputs</a>";

自动完成功能适用于页面加载后我已在屏幕上显示的文本字段。 “添加输入”也可以正常地在屏幕上添加更多字段。

问题是那些新添加的字段不会触发自动完成功能。任何想法如何实现这一目标？

谢谢！

Answer 1

问题是代码对每个附加元素使用相同的id。 Ids必须是唯一的。重构代码，以便在附加到DOM的元素上设置类属性。然后在调用autocomplete函数时使用该类作为选择器。

<强>的Javascript

<script>

      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Scheme"
      ];

      $( document ).ready(function() {
        $("#addInputs").click(function() {
          //Adding the class
          $("#inputList").append("<input type='text' class='autocomplete' size='35' name='sales[]' /><br />");

          //Selector using the class
          $( ".autocomplete" ).autocomplete({
            source: availableTags
          });
        });
    });
</script>

Answer 2

添加新的输入元素后，您需要在其上初始化小部件。

$(function () {

    function autocomplete(el){
        $( el ).autocomplete({
            source: availableTags
        });

    }

    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Scheme"
    ];

    autocomplete($("#autocomplete"))

    $("#addInputs").click(function() {
        var el = $("<input type='text' size='35' name='sales[]' /><br />").appendTo("#inputList");
        autocomplete(el)
    });
});

Answer 3

在HTML ID属性中应该包含唯一值，但不包含CLASS属性所以代替id使用class（class =“autocomplete”）

Answer 4

我认为发生问题的原因是.autocomplete函数仅针对DOM中已有的元素绑定了一次，我的建议是使用.live或.on绑定以便后面的元素可绑定到：

$('#autocomplete').on("focus", function(e) {
    if ( !$(this).data("autocomplete") ) {
        $(this).autocomplete({            
            source: availableTags
        });
    }
});

Answer 5

尝试：

$(document).on("focus", "#autocomplete", function(e) {
    if ( !$(this).data("autocomplete") ) {
        $(this).autocomplete({            
            source: availableTags
        });
    }
});

在我的网站上有效。 ;）

jQuery - 自动完成+附加功能

5 个答案: