jQuery UI autocomplete is not working

This is my JavaScript code:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("input#suggestZams").autocomplete({
        source: "content/prevadzky/zam/zam_json2.php?letter=all",
        minLength: 1,
        delay: 0,
        select: function(event, ui) {
            alert(1);
        }
    });
});
//]]>
</script>

This is my HTML:

<input id="suggestZams" class="input" size="10" />

The URL zam_json2.php?letter=all returns this json:

[
{ "id": "31440", "value": "Andrej\u010d\u00e1k, Ing." },
{ "id": "31690", "value": "Alexovi\u010d , Ing." },
{ "id": "31796", "value": "Antoni\u010d , Ing." },
{ "id": "31989", "value": "Antolik , Ing." },
{ "id": "32010", "value": "Ambrozov\u00e1 RNDr., PhD." },
{ "id": "32014", "value": "Aksam\u00edt" },
{ "id": "32024", "value": "Angelovi\u010d" },
{ "id": "32102", "value": "Andrej\u010d\u00e1k" },
{ "id": "32168", "value": "Avukov\u00e1 , Ing." },
{ "id": "32177", "value": "Andr\u00e1\u0161" },
{ "id": "32181", "value": "Andrej\u010d\u00e1kov\u00e1 , Mgr." },
{ "id": "32403", "value": "Arend\u00e1\u0161 , Bc." },
{ "id": "47379", "value": "An\u010fal" },
{ "id": "47399", "value": "Adam\u00edk , Ing." },
{ "id": "50022", "value": "Abo\u0161i" },
{ "id": "50085", "value": "Armer\u00eda Olmedo , Ing." },
{ "id": "53468", "value": "Anto\u0161" },
{ "id": "54837", "value": "Adamec , Ing." },
{ "id": "56659", "value": "Apostolou" },
{ "id": "57820", "value": "Alez\u00e1r" },
{ "id": "58576", "value": "Andrej\u010d\u00e1k , Bc." },
{ "id": "58587", "value": "Aronov\u00e1 , Ing." },
{ "id": "58595", "value": "Abaffy , Bc." },
{ "id": "58607", "value": "Adamec , Bc." },
{ "id": "58643", "value": "Antu\u0161开发者_开发技巧 , Ing." },
{ "id": "62277", "value": "Adam\u010d\u00e1k , Mgr." },
{ "id": "62379", "value": "Andruch" },
{ "id": "63415", "value": "Adamkovi\u010d , Ing." }
]

---

Quote:

Autocomplete can be customized to work with various data sources, by just specifying the source option. A data source can be:

• an Array with local data
• a String, specifying a URL
• a Callback

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

What you are doing looks odd to me. I think that you will actually need to edit the server side script so that it expects the query string variable term instead of letter and returns an array of strings or an array of {label, value} objects instead of {value, id}.

If the URL content/prevadzky/zam/zam_json2.php?letter=all is provides the "complete" list of words at once, you can do something along these lines:

$.getJSON("content/prevadzky/zam/zam_json2.php?letter=all", function(data) {
    var datacopy = $.map(data, function(item) {
        return {
            label: item.value,
            value: item.id
        };
    });
    $("input#suggestZams").autocomplete({
        source: datacopy,
        minLength: 1,
        delay: 0,
        select: function(event, ui) {
            alert(typeof ui);
        }
    });
});

---

If you want to get the data from a url you have to define a function for source:

source: function( request, response ) {
    $.ajax({url: "content/prevadzky/zam/zam_json2.php?letter=all",
            dataType: "json",
            ...
           });
    },
...

EDIT:

In the docs it says: source can be a URL. In this case, try to change the JSON response to have 'label' instead of 'id' in the returned objects.

---

Here an Script that work for me in jQuery 1.5.1.

source: function( request, response ) {
    $.ajax({
        url: "...",
        dataType: "json",
        ...
        success: function( data ) {
            # data = json response
        }
    });
}