Question

我一直在为我的网站使用JqueryUI自动完成功能，当突然停止工作时一切正常。我正在使用ajax来获取源数据（json输出）。到目前为止一切都运作良好。但是当我渲染结果时，结果却是“未定义”

这是我的代码：

$("#autocomplete_user_field").autocomplete({
            source: function (request, response) {                      
                $.ajax({
                     type: "post",      
                    url: "/user/autocomplete_search_user",
                    data: {
                        user_input: request.term                            
                    },                                              
                    success: function(data) {   
                        if (data.length == 0) {                                                
                            $('.search-query').popover('show');
                        }
                        //alert(JSON.stringify(data));
                    response(data);                       
                    }                        
                });
            },
            minLength: 2,
            appendTo: "#menu",
            autoFocus: true
       }).data("ui-autocomplete")._renderItem = function( ul, item ) {         
        return $( "<li>" )
            .data( "ui-autocomplete-item", item )
            .append( "<a href='/users/" + item.slug + "'>" + "<img src='" + item.imgsrc + "' style='width: 35px; height: 35px; margin-right: 5px; float:left;'/>"  + item.label + "<br><span>" + item.mutualfriends + " <%= t 'friends.mutual_friends' %></span>" +  "</a>" )
            .appendTo(ul);
        };

在_renderItem函数下，如果我做警报（“item.slug”）;输出是“未定义的”，即使我正在从我的ajax POST检索的数据被正确加载（当我做警报时（JSON.stringify（data））;）

有人有想法吗？我已经下载了最新的jquery-ui用于自动完成，但它仍然无效。

Answer 1

您返回的数据与自动填充功能不兼容。您应该返回具有label属性的对象数组，而不是按原样返回整个响应：

$("#autocomplete_user_field").autocomplete({
  source: function(request, response) {
    $.ajax({
      type: "post",
      url: "/user/autocomplete_search_user",
      data: {
        user_input: request.term
      },
      success: function(data) {
        if (data.length == 0) {
          $('.search-query').popover('show');
        }
        response(data.users); // return the array
      }
    });
  },
  minLength: 2,
  appendTo: "#menu",
  autoFocus: true
});

您似乎也缺少dataType:'json'。如果省略，则响应将为string，您需要手动解析。截至目前，您似乎正在检查响应字符串的长度。

除此之外，响应中似乎有奇怪的字符：

因此，当您尝试访问＆＃34; slug＆＃34;时，响应中没有这样的内容......

Jquery自动完成渲染未定义的项目

1 个答案: