jQuery addClass example

Change class name on click in jQuery

by Dmitry Khmil

HTML

<div class="search">
  <input type="text" placeholder="Введите слово">
  <div class="search-result">
    <ul>
      
    </ul>
  </div>
</div>

<div class="result"></div>

CSS

* {
  box-sizing: border-box;  
}

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.search {
  position: relative;
  width: 300px;
  margin: 0 auto;
}

.search input {
  width: 100%;
  height: 36px;
  padding: 0px 15px;
}

.search-result {
  position: absolute;
  width: 100%;
  padding: 10px 0;
  left: 0;
  top: 100%;
  background-color: #ccc;
}

.search-result ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-result li {
  padding: 0 15px;
}

JavaScript

$('.search input').on('input', funcion(){
	var result = get;
  
  $.each(result, function(index, value) {
    $(".seach-result ul").append("<li>" + value + "</li>");
  });
});