Question

我需要帮助，首次输入时自动完成工作，但在动态输入中不起作用。

这是我的代码

{% block script %}
<script>
    $(document).ready(function () {
      first();
      $('#btnAdd').click(first);
    });

    function first() {
      var id = $('#cover div').length + 1;
      var wrapper = $("<div id=\"field" + id + "\"><p></p>");
      var product = $("<input type='text' id=\"tags\" name=\"product" + id + "\" size=40    placeholder='enter product' required/> ");
      var space = $("<b> " + "</b>");
      var import_amount = $("<input type='number' name=\"import_amount" + id + "\" size=5   placeholder='amont' style=\"width: 5em\" required/>");
      var total_price = $("<input type='text' name=\"total_price" + id + "\" size=10    placeholder='total price' required/>");
      var space2 = $("<b> " + "</b>");
      var btnDel = $("<a href=\"#\" style=\"font-size:13px; text-decoration:none;\"> Del" + "</a>");
      btnDel.click(function () {
        $(this).parent().remove();
      });

      wrapper.append(product, space, import_amount, space2, total_price, btnDel);
      $('#cover').append(wrapper);
    }
</script>
{% endblock %}

{% block body %}
...
{% endblock %}

{% block endscript %}
<script type="text/javascript">
  $(function () {
    $("#tags").autocomplete({
      source: "/autocomplete_import",
      minLength: 2,
    });
  });
</script>
{% endblock %}

我刚刚开始练习编程，请帮助我。
PS。我的英语不好，如果沟通不好，抱歉。

Answer 1

添加新元素后，您需要应用autocomplete。

尝试以下。

{% block script %}
<script>
    $(document).ready(function () {
      first();
      $('#btnAdd').click(first);
    });

    function first() {
      var id = $('#cover div').length + 1;
      var wrapper = $("<div id=\"field" + id + "\"><p></p>");
      var product = $("<input type='text' id=\"tags\" name=\"product" + id + "\" size=40    placeholder='enter product' required/> ");
      var space = $("<b> " + "</b>");
      var import_amount = $("<input type='number' name=\"import_amount" + id + "\" size=5   placeholder='amont' style=\"width: 5em\" required/>");
      var total_price = $("<input type='text' name=\"total_price" + id + "\" size=10    placeholder='total price' required/>");
      var space2 = $("<b> " + "</b>");
      var btnDel = $("<a href=\"#\" style=\"font-size:13px; text-decoration:none;\"> Del" + "</a>");
      btnDel.click(function () {
        $(this).parent().remove();
      });

      wrapper.append(product, space, import_amount, space2, total_price, btnDel);

      $('#cover').append(wrapper);

      $('#cover').find('input[type=text]:last').autocomplete({
         source: "/autocomplete_import",
         minLength: 2,
      });
    }
</script>
{% endblock %}

{% block body %}
...
{% endblock %}

{% block endscript %}
<script type="text/javascript">
  $(function () {
    $("#tags").autocomplete({
      source: "/autocomplete_import",
      minLength: 2,
    });
  });
</script>
{% endblock %}

或者您可以参考下面的小提琴。

jsfiddle.net/81fg75cx /

自动完成功能在动态输入字段中不起作用

1 个答案: