datalist with selected option

HTML

<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<input list="cities" name="city">
<datalist id="cities"> 
    <option value="Portland">
    <option value="San Francisco">
    <option value="San Diego">
    <option value="San Fernando">
    <option value="San Antonio">
    
</datalist>
<input type="button" id="xx">

JavaScript

function init() {
  //$("input[name=city]").val('Portland');
 
   //I'd like to default to a city, ignoring that for now.
       //$('input[name=city]').find('[value="Portland"]').attr('selected', true);
 
  $('input[name=city]').focusin(function() {
    $('input[name=city]').val('');
  });
  $('#xx').click(function() {
    $('input[name=city]').val('');

  });

}
$(document).ready(init);