Задать вопрос
meekes
@meekes
Стажер

Как настроить поиск в выпадающем меню?

Нужно на сайт вставить поиск с менюшкой.

Нашел решение на одном сайте
Ссылка на решение https://codepen.io/iamyahoo/pen/mVLNqY

Нужно чтобы при выборе определенной строки была переаттестация на другой сайт (поддомен), т.е не знаю как вставить ссылку на результат поиска

<div ng-app="app" ng-controller="mainCtrl">
  <dropdown-list data-items-list="itemsList" data-placeholder="Выбор города"></dropdown-list>
</div>


body {
  font-family: Arial, sans-serif;
}

input {
  padding: 3px 5px;
  border: 1px solid gray;
  border-radius: 3px;
}

.list {
  list-style-type: none;
  margin: 0;
  opacity: 0;
  padding: 4px 7px;
  position: absolute;
  margin-left: -1000px;
  background: white;
  box-shadow: 1px 1px 6px rgb(195, 195, 195);
  border-radius: 2px;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.list li {
  padding: 3px 5px;
  cursor: pointer;
}

.list li:hover {
  background: lightgray;
}

.show .list { 
  margin-left: 0;
  opacity: 1;
}


angular.module('app', [])

.controller('mainCtrl', function($scope){
  /*
   * Создаем список элементов
   */
  $scope.itemsList = [
    {'name': 'Ростов'},
    {'name': 'Москва'},
    {'name': 'Питер'},
    {'name': 'Arawn Lir'},
    {'name': 'Cepheus Zephyrus',},
    {'name': 'Leander Pallas',},
    {'name': 'Chryses Vohu Manah'},
    {'name': 'Nuadha Lycus'}
  ];
})

/*
 * Объявляем директиву, которая будет создавать сам список
 */
.directive('dropdownList',function( $timeout ){
  return {
    restrict: 'E',
    scope: {
      itemsList: '=',
      placeholder: '@'
    },
    template: '<input type="text" ng-model="search" placeholder="{{ placeholder }}" />' +
				'<div class="search-item-list"><ul class="list">' +
				'<li ng-repeat="item in itemsList | filter:search" ng-click="chooseItem( item )">{{ item.name }}' +
          '<span class="amount">{{ item.amount }}</span>' +
    		 '</li>' +
				'</ul></div>',
    link: function(scope, el, attr){
        var $listContainer = angular.element( el[0].querySelectorAll('.search-item-list')[0] );
        el.find('input').bind('focus',function(){
          $listContainer.addClass('show');
        });
        el.find('input').bind('blur',function(){
          /*
             * 'blur' реагирует быстрее чем ng-click,
             * поэтому без $timeout chooseItem не успеет поймать item до того, как лист исчезнет
             */
          $timeout(function(){ $listContainer.removeClass('show') }, 200);
        });
      
      	scope.chooseItem = function( item ){
				 scope.search = item.name;
           $listContainer.removeClass('show');
			 }
    }
  }
});
  • Вопрос задан
  • 294 просмотра
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы