Bende bir sorun gözükmüyor farklı bir telefon veya internetten kullanarak denedin mi?
JSON neden kullanılıyor bilmiyorum, kullanılmamış halinin örneğini inceleyebilirsin.
<!-- index.php -->
<input type="text" name="q" class="search">
<div id="yazbuna"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('.search').keyup(function (){ // keydown veya keyup
$.post('arama.php',{
arama: $('.search').val()
}, function(response) {
$('#yazbuna').html(response);
})
});
});
</script>
// arama.php
if(isset($_POST['arama'])):
// Yapılacak işlemler
echo $_POST['arama'];
endif;
Aldığın hosting firmasıyla iletişime geçmen sorunun daha kesin bir şekilde çözülmesine yardımcı olabilir
flex-direction ile bunu yapabilirsin.
<div class="product-wrapper"> <!-- Ürünlerin tutulduğu kapsayıcı başlangıç -->
<div class="product"> <!-- 1. Ürün -->
<div class="product-head"> <!-- Ürün Resmi -->
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="product-body"> <!-- Ürün İsmi -->
Product Name
</div>
<div class="product-footer"> <!-- Sepete Ekle Butonu -->
<button>Sepete ekle</button>
</div>
</div> <!-- 1. Ürün bitiş -->
<div class="product"> <!-- 2. Ürün başlangıç -->
<div class="product-head"> <!-- Ürün Resmi -->
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="product-body">
<!-- Ürünün yüksekliği diğerinden farklı olsun diye <br> yazdım -->
Product Name <br><br><br><br><br><br><br>
</div>
<div class="product-footer"> <!-- Sepete Ekle Butonu -->
<button>Sepete ekle</button>
</div>
</div> <!-- 2. Ürün bitiş -->
</div> <!-- Ürünlerin tutulduğu kapsayıcı bitiş -->
.product-wrapper{
display: grid; /* Ürünler yan yana gelsin diye */
grid-template-columns: 1fr 1fr; /* Kaç adet ürünün yan yana geliceği belirler, kaç ürün yan yana gelsin istiyorsak o kadar 1fr yazmamız gerekiyor. */
}
.product{
display: flex;
flex-direction: column;
}
.product-footer{
margin-top: auto;
/*
* sepete ekle butonunun içinde olduğu bu div ürünün yüksekliği ne kadar olursa olsun onun daima en altta kalmasını sağlar.
* flex-direction: column; özelliği olmadan kullanılmıyor.
*/
}
CSS Flex ile İlgili Her şey Tayfun Erbilen
Ek olarak bunlara da bir bakmanı tavsiye ederim
Medium CSS Grid Layout
Mozilla CSS Grid Layout
neden json kullanıyoruz burada? kullanmadan yaparsak ne gibi bir sorun olur?
m100 mantığını anlatmış burada inceleyebilirsin.
https://prototurk.com/soru/1662-dinamik-arama-bolumu
Tek yapman gereken css kodunu sayfana eklemek
Resim veya kodlar falan olsaydı iyiydi.
JS ile uğraşmadan CSS koduna bu satırı eklersen yavaşça aşağı inicektir.
html,body{
scroll-behavior: smooth;
}
Kısa bir örnek
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
scroll-behavior: smooth;
}
</style>
</head>
<body>
<a href="#down">Aşağı İn</a>
<div class="container" style="height: 200vh"></div>
<div id="down">Aşağıda havalar soğuk</div>
<!--
JS ile yapmakta ısrarcıysan buda işini görür.
<button>Aşağı İn</button>
<div class="container" style="height: 200vh"></div>
<div id="down" style="height: 300px;background-color: aqua;">Aşağıda havalar soğuk</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
$('html, body').animate({
scrollTop: $('#down').position().top
});
});
});
</script>
-->
</body>
</html>
w3schools behavior
Ek olarakta kayıtlarının uzamasına izin verirsen, sayfalamazsan kayıtlar çoğaldıkça takılma, geç yükleme gibi sorunlar çıkartıcaktır.