Нужно на сайт вставить поиск с менюшкой.
Нашел решение на одном сайте
Ссылка на решение
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');
}
}
}
});