jQuery addClass example

Change class name on click in jQuery

by Alexey Ukolov

HTML

<div id="searh">
  <input type="text" id="who" placeholder="Поиск по сайту" value="" />
  <div id="poisk">
    <div class="hidden"><a href="#" target="_blank"> Санкт-Петербург Ленинград Питер</a></div>
    <div class="hidden"><a href="#" target="_blank"> Екатеринбург Свердловск</a></div>
    <div class="hidden"><a href="#" target="_blank"> Сахар Рафинад</a></div>
  </div>

CSS

#searh {
  width: 200px;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  position: relative
}

.hidden {
  display: none
}

input#who {
  margin-bottom: 7px;
  outline: medium none;
  width: 132px;
  border-color: #777;
  transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s
}

input#who:hover {
  width: 182px;
  transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s
}

input#who:focus {
  width: 182px;
  transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s
}

#poisk {
  margin: 3px auto 0;
  position: absolute;
  z-index: 888
}

#poisk div {
  border-radius: 7px;
  width: 200px;
  margin: 1px auto;
  box-shadow: 3px 3px 7px 1px #aaa, -1px -1px 2px 0 #aaa
}

#poisk a {
  border-radius: 5px;
  background-color: #fff;
  background-position: left center;
  background-repeat: no-repeat;
  color: #318a3b;
  background-size: 20px 20px;
  display: block;
  font-family: arial;
  font-size: 13px;
  line-height: 14px;
  margin: 0;
  padding: 6px;
  text-decoration: none;
  text-shadow: 0 0 0 #000;
  border: solid 1px #999
}

#poisk a:hover {
  color: #0000ff;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  box-shadow: 0px 0px 10px 1px #aaa inset
}

JavaScript

$("#who").on("keyup", function() {
  var searchText = $(this).val().toLowerCase() || "___";

  $("#poisk > div").each(function() {
    var elem = $(this);
    var words = elem.text().toLowerCase().split(' ');

    if (words.find(function(word) {
        return word.indexOf(searchText) === 0;
      })) {
      elem.removeClass("hidden");
    } else {
      elem.addClass("hidden");
    }
  });
});