How to get user selected value from "datalist" attribute of input

I have generated the options of datalist from an API by using for loop. It is generated in a correct way, but when I try to get that which option has been selected by the user, it gives an error.

The following is HTML code for input and datalist and I am calling "onchange()" function after user input

 <input placeholder="Text " type="text" id ="citiesdata" list="cities" onchange="showAlert()"/>
<datalist id="cities" >
</datalist>

The options are generated for datalist by using for loop on "arr" array which stored the data from API

var list = document.getElementById('cities');
for (i = 0; i<arr.length; i++){
  var option = document.createElement('option');
  option.value = arr[i].name;
  list.appendChild(option);
}
    
    
function showAlert(){
  a = document.getElementById('cities').value
  alert(a);
}