1

我有一个页面，我想在其中动态添加更多文本字段，为此我使用了 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>";

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

问题是那些新添加的字段不会触发自动完成功能。有什么想法可以实现吗？

谢谢！

4

5 回答 5

4

问题是代码对每个附加元素使用相同的 id。ID 必须是唯一的。重构代码，使其在附加到 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>
于 2013-06-19T09:36:58.077 回答
1

尝试这个 ：

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

在我的网站上工作。;)

于 2019-09-10T20:26:08.800 回答
0

我认为问题的发生是因为.autocomplete对于 DOM 中已经存在的元素，该函数只绑定了一次，我的建议是使用.liveor.on绑定，以便以后的元素可以绑定到：

$('#autocomplete').on("focus", function(e) {
    if ( !$(this).data("autocomplete") ) {
        $(this).autocomplete({            
            source: availableTags
        });
    }
});
于 2013-06-19T09:47:10.740 回答
0

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

$(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)
    });
});
于 2013-06-19T09:37:07.687 回答
0

在 HTML 中，ID 属性应包含唯一值，但不包含 CLASS 属性，因此使用 class (class = "autocomplete") 代替 id

于 2013-06-19T09:38:15.833 回答