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顺序

Answer 2

我遇到了同样的问题。现在要解决这个问题，一旦输入成为焦点，我就会在输入上创建小部件。它将帮助您解决问题。

您可以寻求帮助 making sure some event bing only when needed

示例代码将如下所示

$( "#target" ).focus(function() {
  //I don't care if you manipulated the DOM or not. I'll be cautious. ;)

   (function() {
  $( "#combobox" ).combobox();
    $( "#toggle" ).click(function() {
      $( "#combobox" ).toggle();
    });
   })();

  // use a flag variable if you want
});

这解决了我的问题。希望它是您正在寻找的解决方案

dom操作后Jquery UI自动完成功能无法正常工作

2 个答案: