how to use autocomplete step by step

See more:

Javascript

HTML

PHP

jQuery-UI

Hello guys hope you can give me an idea or any "Working Sample" on how to create an autocomplete using jquery.. i have some sample but its not working

$(function() {
    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.id,
                            source: item
                        }
                    }));
                }
            });
        },
        minLength: 2,
        change: function(event, ui) {
           if (ui.item) {
              $('#your_hidden_input').val(ui.item.source.id);
              $(this).val(ui.item.value);
           }
        }
    });
});

Based from this line

url: "http://ws.geonames.org/searchJSON",

when i type in it should go to http://ws.geonames.org/searchJSON but the problem is when i type in my value it goes to this url

http://mysite.com/undefined?query=myqueryvalue"


and help and idea is very much appreciated guys thanks in advance