Change list of cities depending on Country select with Bootstrap typeahead

[kindo]

Hello, I have this code to print all locations from a json file:

countries.json:

    {
        "af": {
            "name": "Afghanistan",
            "phoneCode": "93"
        },
        "al": {
            "name": "Albania",
            "phoneCode": "355"
        },
        "dz": {
            "name": "Algeria",
            "phoneCode": "213"
        },
        "ad": {
            "name": "Andorra",
            "phoneCode": "376"
        }

 }

Jquery:

    function getData() {
            $.ajax({
                url: "countries.json",
                success: function (data) {
                    var json = $.parseJSON(data);
                    var output = '<ul>';
                    $.each(json, function(i,v)
                    {
                        output += '<li>ObjectName: ' + i + ' Country Name: ' + v.name + ' Number: ' + v.phoneCode + '</li>';
                    });
                    output += '</ul>';
                    $('#results').html(output);
                }
            });

    }

Please, If I do want to use it a typeahead to change list of cities depending on Country select:

Typeahead one: Input country
Typeahead two: Input states

Html:

Country:
<input type="text" id="list-countries"/>

States:
<input type="text" id="list-states"/>

Pseudocode:

If 'typeahead one' = Canada
                                then 
                                'typeahead two' should list states in Canada: like texas...

[kindo]

I forgot to add the Json file for states:

json:

{
    "states":[  {"country":"AD","type":"AIRP","Coord":"42.5,1.51666666666667","name":"Andorra la Vella"},   {"country":"AE","type":"PRT","Coord":"25.4833333333333,53.1333333333333","name":"Abu al Bukhoosh"}
    }