написал fetch для search

fitness
Kirill Pet 8 months ago
parent 5b0a62233e
commit 86eb54bb5c
  1. 5
      assets/css/gp-style-desktop.css
  2. 86
      assets/js/main.js
  3. 10
      index.html

@ -269,6 +269,11 @@
background-color: var(--background-grey-hover); background-color: var(--background-grey-hover);
border-radius: 4px; border-radius: 4px;
display: none;
}
.header-menu-search__found.active{
display: block;
} }
.header-menu-search__error{} .header-menu-search__error{}
.header-menu-search__item{ .header-menu-search__item{

@ -260,6 +260,92 @@ btnOpenSearchPhone.onclick = function () {
searchPhone.classList.toggle('active'); searchPhone.classList.toggle('active');
} }
// pc
let inputSearchPc = document.querySelector('.header-menu-search__input'),
btnSearchPc = document.querySelector('.header-menu-search__btn');
btnSearchPc.onclick = function () {
let value = inputSearchPc.value,
newPost = {
value: value,
};
postSearch(newPost, 'pc');
}
// phone
let inputSearchPhone = document.querySelector('.phone-search__input');
inputSearchPhone.addEventListener('input', function(event) {
let value = event.target.value,
newPost = {
value: value,
};
postSearch(newPost, 'phone');
});
function postSearch(newPost, device) {
let contentPc = document.querySelector('.header-menu-search__found'),
contentPhone = document.querySelector('.phone-search__found');
fetch('http://jsonplaceholder.typicode.com/posts', {
method: 'POST',
// body: JSON.stringify(newPost),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((data) => {
if (device == 'pc') {
contentPc.innerHTML = '';
contentPc.innerHTML = `<div class="header-menu-search__item">
<img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
<div class="header-menu-search-item__content">
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
<p class="header-menu-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
</div>
</div>`;
contentPc.classList.add('active');
}else{
contentPhone.innerHTML = '';
contentPhone.innerHTML = `<div class="phone-search__item">
<img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
<div class="phone-search-item__content">
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
<p class="phone-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
</div>
</div>`;
contentPhone.classList.add('active');
}
}).catch(
() => {
if (device == 'pc') {
postError(contentPc);
}else{
postError(contentPhone);
}
}
)
}
function postError(divContent) {
divContent.innerHTML = ''
let p = document.createElement("p");
p.textContent = "Произошла ошибка"
p.className = "header-menu-search__error text-2";
divContent.appendChild(p);
}
// search end // search end
// open-modal // open-modal

@ -228,7 +228,7 @@
<input type="text" class="header-menu-search__input" placeholder="Поиск"> <input type="text" class="header-menu-search__input" placeholder="Поиск">
<div class="header-menu-search__found"> <div class="header-menu-search__found">
<div class="header-menu-search__item"> <!-- <div class="header-menu-search__item">
<img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img"> <img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
<div class="header-menu-search-item__content"> <div class="header-menu-search-item__content">
@ -244,7 +244,7 @@
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p> <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
<p class="header-menu-search-item__art text-2">Артикул: STP1000C</p> <p class="header-menu-search-item__art text-2">Артикул: STP1000C</p>
</div> </div>
</div> </div> -->
<!-- <p class="header-menu-search__error text-2"> <!-- <p class="header-menu-search__error text-2">
К сожалению, по вашему запросу ничего не найдено К сожалению, по вашему запросу ничего не найдено
@ -356,19 +356,19 @@
<div class="phone-search__content"> <div class="phone-search__content">
<input type="text" class="phone-search__input" placeholder="Поиск"> <input type="text" class="phone-search__input" placeholder="Поиск">
<div class="phone-search__found active"> <div class="phone-search__found">
<!-- <p class="text-1"> <!-- <p class="text-1">
К сожалению, по вашему запросу ничего не найдено К сожалению, по вашему запросу ничего не найдено
</p> --> </p> -->
<div class="phone-search__item"> <!-- <div class="phone-search__item">
<img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img"> <img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
<div class="phone-search-item__content"> <div class="phone-search-item__content">
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p> <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
<p class="phone-search-item__art text-2">Артикул:&nbsp;STP1000C</p> <p class="phone-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save