JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="" class="city" maxlength="50" autocomplete="on" style="border: 1px solid #000; color: rgb(80, 80, 80);">

JavaScript

$(".city").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON?&country=PK",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term,
                countryName: "Pakistan"
            },
            success: function (data) {
                response($.map(data.geonames, function (item) {
                    return {
                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                        value: item.name
                    }
                }));
            }
        });
    }
});