JQuery UI AutoComplete - can't get data typed in the input field

Question

I've changed the standard method of Jquery UI autocomplete to use POST instead of GET:

$(function () {
    var data = $(this).val();
    var dataString = 'location=' + data;

    $(".suggest_locations").autocomplete({

        source: function (request, response) {
            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: dataString,
                dataType: "json",
                cache: false,
                success: response
            })
        },
        minLength: 1,
        delay: 0,
        autoFocus: true
    });
});

But "data" is always empty, no matter what I write in the input field.

I'm using an external file called ajax.php to get all saved locations from a database, but it'll show always all locations available, because "data" doesn't read what I'm typing in the input field.

I really appreciate any help!

Answer 1

The variable data is not updated when you change the value of your input field, but only once: when the document is loaded.

Use this instead of your source option:

source: function(request, response) {
    $.ajax({
        url : 'ajax.php',
        type    : 'post',
        dataType: 'json',
        data    : 'location=' + request.term,
        cache   : false,
        success : function(data) {
            response(data);
        }
    });
}