JqueryUI autocomplete, Custom renderItem doesn't work

Question

Hi I have read a lot of answers on this one and followed the instructions but it is just not working for me.

 $(document).ready(function(){<br> $(".header-search-box").autocomplete({ source: function(req,res) { $.ajax({ url: "http://localhost:3000/autocomplete/"+req.term, dataType: "jsonp", type: "GET", data: { search: req.term } }); }, select: function(event, ui) { } }).data('ui-autocomplete')._renderItem = function(ul,item){ console.log('I am coming back') return $("<li>").append("<a>"+item.model+"</a>").appendTo(ul); } 

});

This code is not working, the _renderItem function doesn't even print to the console.

Again I have followed all the suggestions in previous answers, any help would be appreciated

Edit 1

The Ajax success function is this

  success: function(data) { res($.map(data, function(item) { return { : item.make + ' ' +item.model,//text comes from a collection of mongo value: item.model }; })); }, 

I am not sure how to translate that into the data object...

Answer 1

I tried your custom _renderItem with a local array source.

It works nicely and also gives the alert as set.

Take a look here : http://jsfiddle.net/XJ5En/

JS:

var tags = ["abc","bas","cqwe"];
$(".header-search-box").autocomplete({
    source: tags
}).data('ui-autocomplete')._renderItem = function(ul,item){
    alert('I am coming back');
    return $("<li>").append("<a>"+item.value+"</a>").appendTo(ul);
};

There must be some error in assigning the response to the source. Please check it properly.