动态字段上的 Jquery UI 自动完成答案

【问题标题】：Jquery UI autocomplete on dynamic fields动态字段上的 Jquery UI 自动完成
【发布时间】：2016-08-18 04:26:55
【问题描述】：

请看一下这个屏幕截图。

http://www.screencast.com/t/GMGBy6QF9bP

正如我所展示的，我正在尝试在动态生成的字段上使用 jquery ui 自动完成功能，自动完成功能适用于我用来复制和生成动态字段的主要字段。但是当添加一个新字段时，自动完成功能不适用于新生成的字段。

这是我的自动完成代码

$(function(){
  $(".get-tasks").autocomplete({
   source: baseurl+"job/job/get_tasks_autocomp",
  });
})

我想在这里得到某人的帮助来解决这个问题，请在代码中显示我该如何解决这个问题。

这是添加新字段的代码

 $(document).ready(function(){  
      var i=0;  
      $('#add_fault_fld').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" class="get-tasks job-tasks form-control" name="fault['+i+']" id="['+i+']" placeholder="" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');

      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      $('#submit').click(function(){            
           $.ajax({  
                //url:"name.php",  
                method:"POST",  
                data:$('#add_fault').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_fault')[0].reset();  
                }  
           });  
      });  



 }); //End

【问题讨论】：

能否提供Add More按钮的代码，jsfiddle会有所帮助。
@kasperite 我已经更新了帖子，请检查。

标签： jquery jquery-ui autocomplete

【解决方案1】：

嗯，好的，试试这个，看看它是否适合你。我正在使用原型将自动完成功能附加到动态元素。

更新：为演示添加了 jsfiddle：https://jsfiddle.net/p7pdmbgf/

UPDATED-2：https://jsfiddle.net/p7pdmbgf/3/

$('#add_fault_fld').click(function(){  
   i++;
   var element = '<tr id="row'+i+'"><td><input type="text" class="get-tasks job-tasks form-control" name="fault['+i+']" id="['+i+']" placeholder="" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
   $('#dynamic_field').append(element).attachAutocomplete();
});


$.fn.attachAutocomplete = function() {
   $(this).find(".get-tasks").autocomplete({
     source: baseurl+"job/job/get_tasks_autocomp",
   });
}

【讨论】：

不工作:(请注意，我用于在 2 个单独的文件中生成动态字段和自动完成的代码
我附上了 jsfiddle 链接，向您展示它是如何工作的。两个单独的文件无关紧要，只要它们都包含在内。我想baseurl 是在一个文件中定义的，而不是在其他文件中定义的？
谢谢兄弟，这个工作但有一个小问题看看screencast.com/t/VFRvHzvg
对这个小问题有什么想法吗？
啊对，你也需要将原型附加到静态字段，即$(function(){ $('#dynamic_field').attachAutocomplete(); })。同时删除另一个自动完成行$(".get-tasks").autocomplete...，因为它不再需要了

【解决方案2】：

@kasperite 抱歉，这就是我所做的一切

我变了

$.fn.attachAutocomplete = function() {
   $(this).find(".get-tasks").autocomplete({
     source: baseurl+"job/job/get_tasks_autocomp",
   });
}

到

  $.fn.attachAutocomplete = function() {
       $('#dynamic_field').attachAutocomplete({
         source: baseurl+"job/job/get_tasks_autocomp",
       });
    }

您能否发布带有新更新的最终代码。

【讨论】：