(function ($) {
$(document).ready(function(){
new Vue({
el: "#search",
delimiters: ["{", "}"],
data: {
keywords: '',
result: [],
countClick: 0,
countItems: 0
},
watch: {
keywords(after, before) {
this.fetchData( this.keywords );
// console.log( this.keywords );
}
},
updated () {
var vm = this;
$('.search__result-item').on('mouseenter', function(){
$('.search__result-item').removeClass('active');
$(this).addClass('active');
});
$('.search__result-item').on('mouseleave', function(){
});
$('.search form .form-text').unbind('keydown');
$('.search form .form-text').keydown(function(e) {
if ( e.keyCode === 38 ) { // up
// console.clear();
$('.search form').submit(function() {
return false;
});
// console.log( vm.countClick );
vm.countClick--;
if ( vm.countClick == 0 ) {
vm.countClick = 0;
$('.search__result').removeClass('change');
$('.search__result-item').removeClass('active');
}
if ( vm.countClick < 0 ) {
vm.countClick = vm.countItems;
$('.search__result').addClass('change');
$('.search__result-item').removeClass('active');
$('.search__result-item').eq(vm.countClick-1).addClass('active');
}
if ( vm.countClick > 0 ) {
// vm.countClick = vm.countItems;
$('.search__result').addClass('change');
$('.search__result-item').removeClass('active');
$('.search__result-item').eq(vm.countClick-1).addClass('active');
}
$('.search__submit').on('click', function() {
$('.search form').unbind('submit');
$('.search form').submit();
});
// console.log( vm.countClick );
}
if ( e.keyCode === 40 ) { // down
// console.clear();
$('.search form').submit(function(event) {
event.preventDefault();
});
// console.log( vm.countClick );
vm.countClick++;
if ( vm.countClick > vm.countItems ) {
vm.countClick = 0;
$('.search__result').removeClass('change');
$('.search__result-item').removeClass('active');
}
if ( vm.countClick > 0 ) {
$('.search__result').addClass('change');
$('.search__result-item').removeClass('active');
$('.search__result-item').eq(vm.countClick-1).addClass('active');
}
// console.log( vm.countClick );
$('.search__submit').on('click', function() {
$('.search form').unbind('submit');
$('.search form').submit();
});
}
if ( !$('.search__result').hasClass('change') ) {
$('.search__submit').on('click', function() {
$('.search form').submit();
});
}
if ( $('.search__result').hasClass('change') && e.keyCode === 13 ) {
var idItem = parseInt(vm.countClick-1);
console.log( document.querySelectorAll('.search__result-item')[idItem].querySelector('a').getAttribute('href') );
document.location.href = document.querySelectorAll('.search__result-item')[idItem].querySelector('a').getAttribute('href');
} else {
if ( e.keyCode === 13 ) {
$('.search form').unbind('submit');
$('.search form').submit();
}
}
});
},
created () {
var vm = this;
// $(document).click(function(event) {
// if ($(event.target).closest(".search").length) return;
// vm.searchClose();
// event.stopPropagation();
// });
},
computed: {
filteredList() {
function auto( str ) {
replacer = {
"q":"й", "w":"ц", "e":"у", "r":"к", "t":"е", "y":"н", "u":"г",
"i":"ш", "o":"щ", "p":"з", "[":"х", "]":"ъ", "a":"ф", "s":"ы",
"d":"в", "f":"а", "g":"п", "h":"р", "j":"о", "k":"л", "l":"д",
";":"ж", "'":"э", "z":"я", "x":"ч", "c":"с", "v":"м", "b":"и",
"n":"т", "m":"ь", ",":"б", ".":"ю", "/":"."
};
return str.replace(/[A-z/,.;\'\]\[]/g, function ( x ){
return x == x.toLowerCase() ? replacer[ x ] : replacer[ x.toLowerCase() ].toUpperCase();
});
}
if ( this.keywords !== "" )
{
var words = this.keywords.split(' '); // разделяем введенный запрос на массив
var countResilt = this.result.filter(post => {
var postList = words.filter(word => {
var access = post.label.toLowerCase().includes(word.toLowerCase());
var access_eng = post.label.toLowerCase().includes(auto(word.toLowerCase()));
return (access === true) ? access:access_eng;
});
return postList;
});
this.countItems = countResilt.length;
return countResilt;
}
}
},
methods: {
searchClose () {
this.keywords = "";
this.result = [];
this.countClick = 0;
$('.search form').unbind('submit');
},
fetchData (id) {
var newthis = this;
fetch('/rest/search?key=' + id, {method: 'GET'})
.then((response) => {
if (response.ok) {
return response.json()
}
throw new Error('Network response was not ok')
})
.then((data) => {
this.result = data.items;
// console.log( data.items );
$('.search__result').removeAttr('style');
})
.catch((error) => {
console.log(error)
})
}
}
});
});
})(jQuery);