Jquery ui autocomplete driving me crazy

I have a <input id="txtCustome2r" />

I have in my .ready function

$("#txtCustome2r").autocomplete({
    source:  "ite开发者_如何学Gomcomplete.asp", 
    minLength: 2,
    select: function( event, ui ) {
        log( ui.item ?
                     "Selected: " + ui.item.value + " aka " + ui.item.id :
                     "Nothing selected, input was " + this.value );
    }
}); 

the auto complete return valid json

[ { "id': "4",  "label": "Kathi  ",   "value": "Kathi  "}, { "id': "6",  "label": "Kathleen  ",   "value": "Kathleen  "}]

and nothing shows up in the drop down. Any help is greatly appreciated!

Thanks!

Single quotes are not valid JSON. You'll need to surround your key names and string values with double quotes:

[ { "id": 4,  "label": "Kathi", "value": "Kathi 3" }, ... ]

If you want to check your JSON response for validity, you can use JSONLint.

If you are still having problems after verifying your format as mentioned in @Mark Bell's solution, try passing in dataType: 'json' to the autocomplete function call.

This can be a little tricky. I like making the source a function so I can have more control. Notice the override on toString:

var search = function (request, response) {
    jQuery.get(
        jQuery('#SearchUrl').val(),
        { searchString: request.term },
        function (data) {
            response(jQuery.map(data.searchResults, function (item) {
                return {
                    label: item.Id,
                    value: {
                        toString: function () { return item.Id + ' - ' + item.Name; },
                        Name: item.Name
                    }
                }
            }));
        }
    );
};
// set up the autocomplete
jQuery('#MyTextBox').autocomplete({
    source: search,
    minLength: 3,
    focus: function (event, ui) {
        jQuery('#name').text(ui.item.value.Name);
    }
});