Auto Complete Ajax Call URL parameter

Question

Am having an autocomplete search box in my visualforce page with ajax call which uses a JSON static resource file to load the data. Since the JSON file is a static data source, I want to get it dynamically. I already formed a dynamic values in the controller class constructor method itself but the URL parameter of the ajax call is not accepting the getter setter variable from the controller class.

Here is my ajax call,

$.ajax({
            'async': true,
            'global': false,
            'url': "{!URLFOR($Resource.techareasubtecharea, '/techandsubtechareacombinations.json')}",
            'dataType': "json",
            'success': function (data) {
                $("#search").catcomplete({
                    delay: 0,
                    source: {!fieldDependencies},
                    select: function (event, ui) {
                        $('#search').val(ui.item.techarea + " : " + ui.item.subtecharea);
                       return false;
                    },
                })
            }

        });
    })

Now I want to replace the JSON file from static resource with dynamically formed JSON data(string variable with JSON format values) in URL parameter of the ajax call.

I tried directly replacing the getter setter variable with in the URL parameter but it is not loading the data.

Any help would be appreciated!.

Edit: static resource json data format

[{"techarea":"3rd Party Apps","subtecharea":"App Inefficiency (Performance Issue)","keywords":"","label":"3rd Party Apps => App Inefficiency (Performance Issue) => "}]

Dynamically formed string variable values

[{"techarea":"3rd Party Apps","subtecharea":"App Inefficiency (Performance Issue)","keywords":"","label":"3rd Party Apps => App Inefficiency (Performance Issue) => "}]

Answer 1

You can simply remove the ajax call as you have the data with you already:

$("#search").catcomplete({
    delay: 0,
    source: {!fieldDependencies},
    select: function (event, ui) {
        $('#search').val(ui.item.techarea + " : " + ui.item.subtecharea);
       return false;
    }
})

Triggering the autocomplete directly might work.

Answer 2

I just removed the URL parameter and changed the datatype from JSON to text, it works.

$.ajax({
            'async': true,
            'global': false,
            'dataType': "text",
            'success': function (data) {
                $("#search").catcomplete({
                    delay: 0,
                    source: {!fieldDependencies},
                    select: function (event, ui) {
                        $('#search').val(ui.item.techarea + " : " + ui.item.subtecharea);
                       return false;
                    },
                })
            }

        });
    })