jquery UI dialog + autocomplete

by A B

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.min.css">
<button id="openDialog">Open Dialog</button>
<div id="dialog" title="Dialog Sample">
    <input type="text" id="CityName" name="CityName" value="" />
</div>

<input type="text" id="CityId" name="CityId" value="" />

JavaScript

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        "Confirm": function () {
            alert("You have confirmed!");
        },
            "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#openDialog").on("click", function (e) {
    e.preventDefault();
    $("#dialog").dialog("open");
});

$("#CityName").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                countryCode: 'GB',
                name_startsWith: request.term
            },
            success: function (data) {
                response($.map(data.geonames, function (item) {
                    return {
                        id: item.geonameId,
                        value: item.toponymName
                    };
                }));
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        $('#CityId').val(ui.item.id);
    },
    open: function () {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function () {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});