jQuery/Javascript 帮助：无法使用自动完成功能动态添加字段

Question

我对 jQuery 和 javascript 还很陌生，很难理解我在网上找到的各种示例和代码 sn-ps。

我的 Flask 网站的主要功能之一是一个表单，它允许用户根据需要动态添加任意数量的字段，并且每个字段都提供基于数据库的自动完成选项。

使用网上找到的示例，我已经能够创建一个动态添加选项的表单（但是我对其工作原理的理解非常差）。

我还找到了自动完成的示例，在调整后适用于各个字段。但是，我有一个问题，当它们放在一起时（自动完成和动态添加的字段），表单的第一个字段是唯一自动完成的字段。谁能让我深入了解如何解决这个问题或我做错了什么？几天来我一直在尝试解决这个问题，但我觉得自己已经碰壁了。

这是目前允许我自动完成单个字段的代码的 sn-p：

<script type="text/javascript">
        $(function() {
            $("#autocomplete").autocomplete({
                source:function(request, response) {
                    $.getJSON("{{url_for('fruit.autocomplete')}}",{
                        q: request.term,
                    }, function(data) {
                        response(data.matching_results);
                    });
                },
                minLength: 2,
                select: function(event, ui) {
                    console.log(ui.item.value);
                }
            });
        })
</script>

getJSON调用fruit.autocomplete如图：

@fruit.route('/autocomplete', methods=['GET'])
def autocomplete():
    search = request.args.get('q')
    query = Fruit.query.filter(Fruit.name.like('%' + str(search) + '%'))
    results = []
    for fruit in query:
        result = fruit.as_dict()
        results.append(result)
    return jsonify(matching_results=results)

要自动完成，可以在表单的字段中添加：id="autocomplete"。

另外，这里是 sn-p 的代码，目前允许我向表单动态添加字段（但随后无法自动完成除第一个字段之外的其他字段），但经常出现两个错误：

“未捕获的类型错误：this.source 不是函数”

"Uncaught (in promise) TypeError: Cannot read property 'toString' of undefined"

<script>
$(document).ready(function(){
    var max_input_fields = 20;
    var add_input = $('.add-input');
    var input_wrapper = $('.input-wrapper');
    var new_input = '<div><input class="form-control" id="autocomplete" type="text" name="field[]" value=""/><a href="javascript:void(0);" class="remove-input" title="Remove input">-</a></div>';
    var add_input_count = 1;
    $(add_input).click(function(){
        if(add_input_count < max_input_fields){
            add_input_count++;
            $(input_wrapper).append(new_input).autocomplete();
        }
    });
    $(input_wrapper).on('click', '.remove-input', function(e){
        e.preventDefault();
        $(this).parent('div').remove();
        add_input_count--;
    });
});
</script>

<form action="" method="POST" enctype="">
    <div class="input-wrapper">
        <div>
            Fruit: <br/>
            <input class="form-control" id="autocomplete" type="text" name="field[]" value="" autocomplete="off"/>
            <a href="javascript:void(0);" class="add-input" title="Add input">+</a>
        </div>
    </div>
    <input class="btn btn-outline-info" type="submit" name="cmdsubmit">
</form>

我只是在寻找一种可以同时实现这两个功能的简单方法，并且我对如何实现它的不同方法/建议非常开放，上面的代码示例纯粹是我找到的资源在线似乎有效

非常感谢任何帮助！谢谢！

Answer 1

您将 same id 用于多个元素，因此将其更改为 class 。然后，您需要初始化动态添加的输入，以便您可以使用find(".autocomplete:last").autocomplete(options) 这一行将找到最后添加的自动完成输入，然后初始化相同。

演示代码：

$(document).ready(function() {
  //because this will use mutliple times..
  var options = {
    source: [{
          "value": "Abcde",
        },
        {
          "value": "Xyzmn",
        },
        {
          "value": "DEfwe",
        }
      ] //this is for demo..remove above uncomment below to use
      /*function(request, response) {
            $.getJSON("{{url_for('fruit.autocomplete')}}", {
              q: request.term,
            }, function(data) {
      response(data.matching_results);
      });
    }*/
      ,
    minLength: 2,
    select: function(event, ui) {
      console.log(ui.item.value);
    }
  }

  var max_input_fields = 20;
  var add_input = $('.add-input');
  var input_wrapper = $('.input-wrapper');
  var new_input = '<div><input class="form-control autocomplete" type="text" name="field[]" value=""/><a href="javascript:void(0);" class="remove-input" title="Remove input">-</a></div>';
  var add_input_count = 1;
  $(add_input).click(function() {
    if (add_input_count < max_input_fields) {
      add_input_count++;
      $(input_wrapper).append(new_input)
      //get last input added ..intialize it
      $(input_wrapper).find(".autocomplete:last").autocomplete(options)
    }
  });
  $(input_wrapper).on('click', '.remove-input', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    add_input_count--;
  });
  //your main input.
  $("#autocomplete").autocomplete(options);

});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<form action="" method="POST" enctype="">
  <div class="input-wrapper">
    <div>
      Fruit: <br/>
      <input class="form-control" id="autocomplete" type="text" name="field[]" value="" autocomplete="off" />
      <a href="javascript:void(0);" class="add-input" title="Add input">+</a>
    </div>
  </div>
  <input class="btn btn-outline-info" type="submit" name="cmdsubmit">
</form>