Javascript AutoComplete - Not Populating

Question

I am experiencing some challenges getting my autocomplete box to populate.

I am sending multiple parameters to the source. My current attempt ...

 $("#questionBox").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "csvAPI.php",
            dataType: "json",
            data: {
                term: request.term,
                discipline: $("#disciplineNameSelect option:selected").text(), 
                questionType: $("#questionTypeSelect option:selected").text(),
                surveyTitle: $("#surveyTitleSelect option:selected").text()
            },
            success: function(data) {
                response(data);
            }
        });
    },

You can see the source url does work with the parameters sent ...

http://tinyurl.com/ptl7e9g

Any suggestions on how to get this to work? I have tried many different variations. I can get it to work when I define the source choices manually. But I need it to be dynamic with 4 parameters sent.

Thanks!

check this http://stackoverflow.com/questions/11435433/jquery-ui-autocomplete-with-json — Devendra Singh Bhandari, Nov 07 '15 at 16:36

score 0 · Answer 1 · answered Nov 07 '15 at 17:20

Thank you for the suggestion to the other answer. I was able to get it to work! Mapping the label and value worked. This is important for anyone trying to get jquery autocomplete to work. If your source data is very plain and it does not include label and value you need to map it in the javascript. This now works ...

$('#questionBox').autocomplete({
    source: function (request, response) {
        var qbString = "csvAPI.php?term=" + request.term + "&call=questionBoxAutoComplete" + "&discipline=" + $("#disciplineNameSelect option:selected").text() + "&questionType=" + $("#questionTypeSelect option:selected").text() + "&surveyTitle=" + $("#surveyTitleSelect option:selected").text();
        $.getJSON(qbString, function (data) {
            response($.map(data, function (value, key) {
                return {
                    label: value,
                    value: key
                };
            }));
        });
    },
    minLength: 2,
    delay: 100
});

And this is my dynamic source data essentially ...

 {"0":"What is your revenue breakdown?","3":"What is your net operating income?","4":"What is your revenue renewal rate?","5":"What is your fee per hour?"}

Javascript AutoComplete - Not Populating

1 Answers1