Auto populating value hide if I click on the input field

I am using http://demos.krajee…ails/typeahead.

I have 3 input fields in my form and these are Country, State and City. I am using Typeahead in Country input field to populate country.

Typeahead display data as following-

US - DC

US - MD

UK - London

If I choose "US - DC" then in Country field I display "US" and in State field "DC".

Here, the problem is- then if I click on Country input field then it replace the value "US" with value "US - DC". And if I click on State input field it remove the value "DC" from the field.

I am using following code-

$("#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);    	

   }	

 })   

});

What I am missing here?