Jquery Autocomplete Rendering Undefined For Item

Question

I've been using JqueryUI autocomplete for my website and everything was working well when suddenly it stops working. I'm using ajax to fetch the source data (json output). To this point everything is working well. But when I'm rendering the results, it turns out to be "undefined"

Here's my code :

$("#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);
        }; 

Under the _renderItem function, If I do alert("item.slug"); the output is "undefined" even though the data I'm retrieving from my ajax POST is correctly loaded (when I do alert(JSON.stringify(data));)

Anyone has an idea? I've download the latest jquery-ui for autocomplete but it still doesn't work.

Answer 1

The data you're returning is not compatible with autocomplete. You should return the array of objects having label property rather than returning the whole response as it is:

$("#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
});

You also seems to be missing dataType:'json'. If you omit that, the response will be a string, which you need to parse manually. As of now it looks like you're checking the length of response string.

Other than that, the response seems to have weird characters in it:

So when you try accessing "slug", there is no such thing in the response...