jQuery -自动完成+追加功能

jQuery - autocomplete + append functions

本文关键字：追加 功能 jQuery      更新时间：2023-09-26

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

一旦页面加载，我已经在屏幕上显示的文本字段的自动完成工作。"添加输入"也可以工作，并正确地在屏幕上添加更多字段。

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

谢谢!

问题是代码对每个附加的元素使用相同的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>

try this: 

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

在我的网站上工作。div;)

一旦添加了新的输入元素，就需要初始化它们上面的小部件。

$(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)
    });
});

在HTML中ID属性应该包含唯一值，但不是class属性，所以使用class (class =" autocomplete")代替ID

我认为问题发生是因为.autocomplete函数仅为DOM中已经存在的元素绑定一次，我的建议是使用.live或.on绑定，以便稍后的元素可以绑定到:

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