Add new object into existing json

Question

I have dropdown like this.

<input id="tripFrom" type="text" 
   angular-select2="{type:'typeahead',placeholder:'- Select -'}" 
   select-typeahead-params="{removeTripId:currentTrip.customerDetails.tripToID, type:'startsFrom'}" 
   select-typeahead-url="getTripFrom('startsFrom')"
   ng-model="currentTrip.fromTripID" 
   select-text="currentTrip.startingAreaName" 
/>

For this dropdown I am getting data like this:

{"success":true,
 "items":[
   {"id":56565,"text":"andra"},
   {"id":56568,"text":"tamilnadu"}
 ]
}

My question is when I add some new text in dropdown (which is not present in dropdown )I need to create its as new object inside of items .

When I blur the dropdown new added data should be displayed in that dropdown as selected.

This what I have added:

$('#s2id_autogen8_search').change(function(){
  var data=[];var items={};
  var newAddress=$('#s2id_autogen8_search').val();
  var newId=Math.floor(Math.random()*1000000+1);
  var newTripAddress={id:newId,text:newAddress}
  items.id=newId;
  items.text=newAddress;
 data.push(items)
  /*$("#tripFrom").select2({
    data : newTripAddress})*/
});

But my input is not displaying when I blur it. What I did wrong?

Answer 1

Try using the blur instead of the change event.

$('#s2id_autogen8_search').change(function(){

// use this instead 

$('#s2id_autogen8_search').on('blur', function(){

It might be as simple as that.