jQuery自動完成呈現項未定義

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函數下，如果我執行alert（“ item.slug”）; 即使我從ajax POST檢索的數據已正確加載（當我執行alert（JSON.stringify（data））;時），輸出仍為“未定義”

有人有主意嗎？ 我已經下載了最新的jquery-ui以實現自動完成功能，但仍然無法正常工作。

Answer 1

您返回的數據與自動完成功能不兼容。 您應該返回具有標簽屬性的對象數組，而不是按原樣返回整個響應：

$("#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 ，您需要手動對其進行解析。 到目前為止，您似乎正在檢查響應字符串的長度。

除此之外，響應似乎包含奇怪的字符：

因此，當您嘗試訪問“子彈”時，響應中沒有這種東西……