Autocomplete with JSON data fetched via Ajax [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

I am trying to use the autocomplete for a search box, the content for the autocomplete is from a cgi script via Ajax that returns JSON.

Let's start with the javascript portion for my autocomplete. I can get it to work just fine using a hardcoded list, but nothing when I use this.

$(document).ready( function(){
$('#search_term').autocomplete({        
    source:function(request, response){
        $.ajax({
            url: './test2.cgi',
            dataType: 'json',
            data: {
                maxRows: 5,
                name_startsWith: request.term
            },
            success: function(data){
                response( $.map(data.matches, function (item){
                    return {
                        label: item.label + "," + item.value,
                        value: item.value
                    }
                }));
            }
        });

    }
});

Here is an example of the JSON file that's generated by my test2.cgi perl script.

{"matches":[{"value":"color","label":"PATO:0000014"},{"value":"color hue","label":"PATO:0000015"},{"value":"color brightness","label":"PATO:0000016"},{"value":"color saturation","label":"PATO:0000017"},{"value":"color pattern","label":"PATO:0000019"},{"value":"color value","label":"PATO:0000310"}]}

I can't figure out where I am going wrong with this.

开发者_StackOverflow

EDIT 1: I actually performed an ajax call earlier in the code using similar parameters so I assumed it should work. Here is the first ajax call, and I know for a fact that this one works since I am able to process the json data and display it on the site

function runSearch(term){
$('#results').hide();
$('tbody').empty();

var frmStr = $('#obo_search').serialize();

$.ajax({
    url: './test.cgi',
    dataType: 'json',
    data: frmStr,
    success: function (data, textStatus, jqXHR){
        processJSON(data);
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert("Failed to perform search! textStatus:(" + textStatus + ") and errorThrow: (" + errorThrown + ")");
    }
});
}