Autocomplete Jquery

by Luong Dung

HTML

<div class="autocomplete">
  <form action="" method="post" class="form-city" autocomplete="off">
    <input type="text" name="city" placeholder="Input your city...">
    <ul class="list-city">
    </ul>
  </form>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
.form-city{
  position: relative;
  width: 200px;
}

input[type="text"] {
  padding: 3px;
  border: 0;;
  background: #cd004f;
  color: #fff;
  height: 30px;
  line-height: 30px;
  width: 100%;
  
}

.list-city{
  position: absolute;
  top:30px;
  left: 0;
  right: 0;
  display: none;
}

.list-city li{
  padding: 3px;
  background: #ee5cde;
  color: #cf00d9;
}
.list-city li:hover{
  background: #e55dce;
  cursor: pointer;
}

JavaScript

$(function(){
	var $input = $('input');
  var $formCity = $('.form-city');
  var $list = $('ul.list-city');
  var $arrCity = ["Algieria", "Turkey", "United State", "United Kingdom", "Vietnam"];
  var i;
  var li = "";
  for(i=0; i< $arrCity.length; i++){
    li += "<li>"+$arrCity[i]+"</li>";
  }
  $list.html(li);
  $input.focus(function(){
  	$list.css({display: "block"});
  });
  var $item = $('ul.list-city li');
  $item.click(function(){
  	$input.val($(this).text());
  });
  
});