如果单击输入字段，则隐藏自动填充值

Question

我的表单中有3个输入字段，分别是Country，State和City。我在国家/地区输入字段中使用Typeahead来填充国家/地区。

预先输出显示数据如下 -

美国 - DC

美国 - MD

英国 - 伦敦

如果我选择“US-DC”，那么在国家/地区字段中我显示“US”并在状态字段“DC”中显示。

这里，问题是 - 如果我点击国家输入字段然后它将值“US”替换为值“US - DC”。如果我点击状态输入字段，它将从字段中删除值“DC”。

我正在使用以下代码 -

$("#country-id").bind("change", function(e){
    var country = $(this).val();

    var t = $(this);

    $.ajax({
        url: './state',
        type: 'post',
        data: 'id='+country,
        cache: false,
        dataType:'json',

        success: function(data) {
            if(data.state != "")
                $("#state-id").val(data.state);

            var countryVal = country.split("-",1);
            console.log(countryVal);
            t.val(countryVal);
        }
    })  
});

我在这里缺少什么？