自动完成返回结果，但不显示菜单

我无法从此自动完成功能呈现菜单。我曾尝试将items.autocomplete更改为ui-autocomplete-items。自动完成返回结果，但不显示菜单

我试过使用.autocomplete('instance')而不是.data('autocomplete')，我也尝试了内联和外部函数来覆盖_renderItem，但无济于事。所有失败都默默地呈现菜单（检查员显示隐藏的菜单没有项目），除了.autocomplete('instance')返回undefined，因此我不能添加功能。

不幸的是，我不能提供一个工作演示，因为建议服务是私有的和专有的，但是我已经在代码下面提供了示例数据，以供任何想要尝试并进行自己的演示（可能必须使用JSONP更改为JSON）的人使用。我无法将我的代码更改为使用JSON，因为该服务位于另一个域上，并且这是访问它的唯一方法。

任何人都可以看到我可能做错了吗？我已经用尽了所有其他关于这个话题的线索，并尝试了一切。我正在使用jQuery 1.9.1和jQuery UI 1.10.2。

var url; 

var renderItem = function(ul, item) { 
    console.log('rendering item'); 
    return $("<li></li>") 
     .data("ui-autocomplete-item", item) // tried replaceing with item.autocomplete 
     .append("<a>" + item.label + "<br/>" + item.value + "</a>") 
     .appendTo(ul); 
}; 

var getSuggestions = function(request, response) { 
    $.ajax({ 
     url: url, 
     dataType: 'jsonp', 
     data: { 
      postcode: request.term, 
      suggestionType: 'FULL', 
      resultLimit: 50 
     }, 
     success: function(data) { 
      console.log('success :: data:'); 
      console.log(data); 
      $.map(data.suggestions, function(obj, i) { 
       console.log('success.map :: obj['+i+']:'); 
       console.log(obj); 
       return { 
        label: obj.label, 
        value: obj.data.localityTag.postcode, 
        postcode: obj.data.localityTag.postcode, 
        suburb: obj.data.localityTag.locality, 
        state: obj.data.localityTag.state 
       }; 
      }); 
     } 
    }); 
}; 

$(function() { 
    url = $('#raetDomain').val() + $('#raetContext').val() + 'getSuggestions'; 
    window.suggestionSelected = false; 
    var autoc = { 
     delay: 200, 
     minLength: 4, 
     source: getSuggestions, 
     focus: function(e, ui) { 
      e.preventDefault(); // without this: keyboard movements reset the input to '' 
      $('#homeAddressFields .addressSuburb').val(ui.item.suburb); 
      $('#homeAddressFields .addressPostcode').val(ui.item.postcode); 
      $('#homeAddressFields .addressState').val(ui.item.state); 
     }, 
     select: function(e, ui) { 
      e.preventDefault(); 
      window.suggestionSelected = true; 
      $('#homeAddressFields .addressSuburb').val(ui.item.suburb); 
      $('#homeAddressFields .addressPostcode').val(ui.item.postcode); 
      $('#homeAddressFields .addressState').val(ui.item.state); 
     } 
    }; 

    // This is only one of these fields at the moment but I am aiming for two postcode fields 
    // and two suburb fields to all have autocomplete setup on them. 
    $('#homeAddressFields .addressPostcode').each(function(i) { 
     $(this).autocomplete(autoc).data('ui-autocomplete')._renderItem = renderItem; 
     // tried .autocomplete('instance') instead of .data(...) but was undefined 
    }); 
});

的样本数据（不填充）：

{ 
    "suggestions": 
    [{ 
     "data": 
     { 
      "localityTag":{"locality":"ACTON","postcode":"2601","state":"ACT"} 
     }, 
     "label":"ACTON ACT 2601", 
     "value":"ACTON ACT 2601" 
    }], 
    "suggestionType":"FULL" 
}

来源

2014-10-27 SimonDever

您检查了生成的HTML吗？也许它在那里，但CSS样式有'height：0'或其他 - 发生在我身上好几次。 – Boris 2014-10-27 23:30:14

'ui-autocomplete'' UL'元素在那里，隐藏着'display：none'，但没有孩子。试图用JSONP创建一个jsfiddle，如果我成功了，会更新Q. – SimonDever 2014-10-27 23:33:16

尝试各种解决方法的组合之后，我意识到回调未运行。它现在正确地呈现项目，我已经将$ .ajax成功函数更改为下面的代码。

success: function(data) { 
    console.log('success :: data:'); 
    console.log(data); 
    response($.map(data.suggestions, function(obj, i) { 
     console.log('success.map :: obj['+i+']:'); 
     console.log(obj); 
     return { 
      label: obj.label, 
      value: obj.data.localityTag.postcode, 
      postcode: obj.data.localityTag.postcode, 
      suburb: obj.data.localityTag.locality, 
      state: obj.data.localityTag.state 
     }; 
    })); 
}

来源

2014-10-28 00:03:10 SimonDever

自动完成返回结果，但不显示菜单

回答

相关问题