JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all">

<div class="ui-widget">
    <label for="city">JsonP: </label>
    <input id="city">
 </div>

<div class="ui-widget">
    <label for="city2">Array: </label>
     <input id="city2">
</div>

JavaScript

var availableTags = [];
    var london = { label: 'London Airport - UK', value: 'LHR'};
    var paris= { label: 'Paris Airport - FRA', value: 'PAR'};
    availableTags.push(london);
    availableTags.push(paris);    
    $("#city2").autocomplete({
        source: availableTags
    });
    
    function log( message ) {
        $( "<div/>" ).text( message ).prependTo( "#log" );
        $( "#log" ).attr( "scrollTop", 0 );
    }
function filterArrayForString(string, array){
   var results = [];
    $.each(array, function(i, el){

       var label= el.label;
        
        if (label.toLowerCase().indexOf(string.toLowerCase()) !== -1){
            results.push(el);
        }
    });
           return results;
}

    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 20,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    var dataConv = $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    });
                    var filteredAvailable = filterArrayForString(request.term, availableTags );
                    console.log(request.term);
                    console.log(filteredAvailable);
                     var both = filteredAvailable.concat(dataConv);

                    response(both);
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing...