jQuery toggleClass example

Toggle class name on click in jQuery

by Daniil464

HTML

<div  class="d1" data-ng-app="app" data-ng-controller="mainCtrl">

<form>

    <dropdown-list   data-items-list="itemsList" data-placeholder="Искать здесь..."><input type="text"   ng-model="amount" placeholder="Искать здесь...">
    <button type="submit"></button>
     
          <div  class="search-item-list"><ul  class="list">
          <li data-ng-repeat="element in properties | startsWith:amount:'name' | limitTo: 10" ><a href={{element.link}}><span class="linkchamp">{{element.name}}</span></a></li>
          </ul></div></dropdown-list> 

      </form>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

CSS

.d1 {background: #;}
.d1 input {
  width: 90%;
  height: 58px;
  padding-left: 10px;
  border: 2px solid #7eb1dc;
  border-radius: 2px;
  outline: none;
  background: #fff;
  color: #9E9C9C;
}
.d1 button {
  position: absolute; 
  top: 8px;
 
  width: 58px;
  height: 58px;
  border: none;
  background: #704bba;
  border-radius: 0 0px 0px 0;
  cursor: pointer;
}
.d1 button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}
.list {
	display: none;

	
}

.list li {
  padding: 0px 0px;
  cursor: pointer;
	list-style-type: none;
}

.list li:hover {
  background: lightgray;
}

.show .list { 
	display: inline-block;
  margin-left: 0;
  opacity: 1;
	z-index: 100500;
}

.show .list a {
	display: inline-block;
	width: 100%;
	height: 100%;
	min-width: 100px;
	min-height: 25px;
	
}




.linkchamp{
  display: inline-block;
  padding: 5px 15px;
  background-color: rgb(112, 75, 186);
  border-radius: none;
  margin: 0 0 3px 0px;
  color: white;
}

JavaScript

angular.module("app", [])
 
  .controller('mainCtrl', function($scope) {
 

    $scope.properties = [
     {'link':'link','name':'a'},
{'link':'link','name':'b'},
{'link':'link','name':'v'},
{'link':'link','name':'a'},
{'link':'link','name':'b'},
{'link':'link','name':'a'},
{'link':'link','name':'b'},
{'link':'link','name':'a'},
{'link':'link','name':'b'}
    ]; 


  })
  
.filter('startsWith', function(  ) {
    return function(items, prefix, itemProperty) {
           if (prefix !== ""){       
       let par = document.getElementsByClassName('search-item-list');
  par[0].classList.add("show");}
  if (prefix === ''){        
       let par = document.getElementsByClassName('search-item-list');
  par[0].classList.remove("show");}
      return items.filter(function(item) {
        var findIn = itemProperty ? item[itemProperty] : item;
        return findIn.toString().toLowerCase().indexOf(prefix.toLowerCase()) === 0;
 
      });
    };
  });