JSFiddle - React, Tailwind, and code Playground

HTML

<form>Html : City
    <input type="text" id="myinput" />
    <br />Ashx : City
    <input type="text" id="cityinput" />
    <br />Asmx : City
    <input type="text" id="txtIDbyAsmx" />
</form>

JavaScript

var availableTags = [{
    "label": "TYO 東京 Tokyo Narita",
        "value": "TYO"
}, {
    "label": "KIX 大阪 Osaka Knasai",
        "value": "KIX"
}, {
    "label": "PEK 北京 Beijing Capital Intl",
        "value": "PEK"
}, {
    "label": "SHA 上海 Shanghai Honggiao",
        "value": "SHA"
}, {
    "label": "TPE 台北 Taipei",
        "value": "TPE"
}];
var myinput = $("#myinput");
myinput.bind("change", function () {
    <!--     alert("changed:" + myinput.val()); -->
}).bind("keyup", function () {
    <!--     alert("keyup:" + myinput.val()); -->
}).bind("keydown", function () {}).autocomplete({
    source: availableTags
});

var cityinput = $("#cityinput");
cityinput.bind("change", function () {}).bind("keyup", function () {}).bind("keydown", function () {}).autocomplete({
    source: 'http://qamobile.evaair.com/Common/HandingCityInfo.ashx',
    error: function () {
        alert('ajax failed');
    }
});

$("#txtIDbyAsmx").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: 'http://qamobile.evaair.com/Service.asmx/GetCityInfos',
            data: "{ 'prefix': '" + request.term + "'}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        label: item.split('-')[0],
                        value: item.split('-')[1]
                    }
                }))
            },

            error: function (response) {
                alert(response.responseText);
            },

            failure: function (response) {
                alert(response.responseText);
            }
        });
    },
    minLength: 1
});