Arama Kutusu -> Sonuç Listesi
Resimler ile kendimi daha iyi ifade ederim sanıyorum.
bu resim da arama alanının boş hali
https://hizliresim.com/6rcU0g
bu resim de ise ajax ile aranan sonuçlar
kullandığım parçalar
<div class="col-md-9 align-self-center">
<div class="header-right-element d-flex">
<div class="search-element media-body search-box">
<input type="text" placeholder="Kategorilerde Ara..." />
<ul class="list-group liveresult"></ul>
<style>
.search-element input{
padding: 10px 10px 10px 5px;
}
.search-box h4{
color: #fff;
}
/* Formatting result items */
.liveresult li{
cursor: pointer;
}
.liveresult li:hover{
background: #f2f2f2;
}
</style>
</div>
<div class="contact-link">
<div class="phone">
<p>Telefon:</p>
<a href="tel:<?php echo TELEFON ?>"><?php echo TELEFON ?></a>
</div>
</div>
</div>
<!--Cart info End -->
</div>
diğer divlerin üstüne gelmesini istiyorum fakat yapamıyorum
nasıl yapabilirim acaa
yardımlarınız için teşkler.
:D
az önce kendim uğraşa uğraşa yaptım :)
<style>
.search-element input{
padding: 10px 10px 10px 5px;
}
.search-box ul{
position: absolute;
display:block;
z-index: 9;
-webkit-transform-style:preserve-3d;
min-width:205px;
left:auto!important;
box-shadow:0 0 3.76px 0.24px rgba(0,0,0,.15);
top:54px;
}
.search-box h4{
color: #fff;
}
/* Formatting result items */
.liveresult li{
cursor: pointer;
}
.liveresult li:hover{
background: #f2f2f2;
}
.list-group-item{
width: 890px !important;
}
</style>
bu şekilde sorunsuz bir şekilde istediğime ulaştım
ilgiliniz için teşekkürler.belki birine lazım olur