jquery-ui - jquery UI 自动完成在 dom 操作后不起作用

Question

我一直在尝试实现自动完成功能，但遇到了一个困扰我的问题。我第一次调用 .autocomplete 时一切正常，我没有遇到任何问题。但是，如果我在从 DOM 中删除了一些(不相关的)元素并向 DOM 添加了一个新部分之后调用它，那么自动完成将不执行任何操作并且不会报告任何错误。代码:-

$.ajax({
    type : 'get',
    dataType : 'json',
    url : '/finance/occupations',
    cache:true,
    success:function(data){
        occupationList = data;
        $('.js-occupation').autocomplete({ 
            source: occupationList,
            messages: {
                noResults: '',
                results: function(){}
            },
            minLength : 2,
            select:function(event, ui){
                $('.js-occupationId').val(ui.item.id);
            }
        }); 
    }
}); 

此页面的背景是它包含多个部分，当用户在其中移动时可以对其进行操作。隐藏和显示效果很好，不会影响自动完成。但是，如果我执行以下操作:-

          var section = $('.js-addressForm:last').clone();
          clearForm(section);
          $('div.addressDetails').append(section);
          $('.js-addressForm:first').remove();

这使用户能够在上一节中添加多个地址，然后自动完成功能将停止工作。

对我遗漏的明显问题有任何建议或指示吗？

当元素获得焦点时，我尝试将自动完成的初始化放在事件上，但它仍然不起作用。

Answer 1

您必须在所有其他底层对象之后创建自动完成。如果您按 F12，您会看到该列表是“可见的”，但它位于下方并被其后创建的所有实例隐藏。

如果您创建了一个带有输入的 div(一个输入是自动完成)，那么您创建了自动完成，然后是对话框实例，自动完成将永远不会显示。如果您创建对话框然后自动完成，没问题。问题是 z 顺序