<input type="text" name="city" value="" id="input-city"  />
<ul id="ul"> 
<li data-value="Город 1"><a href="">Город 1</a></li>
<li data-value="Город 2"><a href="">Город 2</a></li>
<li data-value="Город 3"><a href="">Город 3</a></li>
</ul>
li{
  cursor: pointer;
  margin: 10px 0;
}
var ids = document.getElementById('input-city');
var lis = [...document.querySelectorAll("ul li")];
var linx = [...document.querySelectorAll("ul li a")];

  for(var i=0; i<lis.length; i++){
    lis[i].onclick = function (e){
      e.preventDefault();
       ids.value = this.getAttribute('data-value')
    }
  }





External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.